@sydsoft/base 1.58.0 → 1.59.0

package/dist/esm/_lib/storage/sessionStorage.js

@@ -0,0 +1,69 @@
+import { decData, encData } from "./encData";
+import { isDev } from "../baseFunctions";
+var storageAvailable = typeof Storage === "undefined" || !window.sessionStorage ? false : true;
+export var setSessionStorage = function (key, value) {
+    if (!storageAvailable)
+        return false;
+    try {
+        sessionStorage.setItem(key, encData(value));
+        return true;
+    }
+    catch (e) {
+        isDev && console.log("ERROR => SessionStorage =>", e);
+        return false;
+    }
+};
+export var getSessionStorage = function (key) {
+    if (!storageAvailable)
+        return false;
+    try {
+        var saved = sessionStorage.getItem(key);
+        return saved ? decData(saved) : null;
+    }
+    catch (e) {
+        isDev && console.log("ERROR => SessionStorage =>", e);
+        return null;
+    }
+};
+export var removeSessionStorage = function (key) {
+    if (!storageAvailable)
+        return false;
+    try {
+        sessionStorage.removeItem(key);
+        return true;
+    }
+    catch (e) {
+        isDev && console.log("ERROR => SessionStorage =>", e);
+        return false;
+    }
+};
+export var clearSessionStorage = function () {
+    if (!storageAvailable)
+        return false;
+    try {
+        sessionStorage.clear();
+        return true;
+    }
+    catch (e) {
+        isDev && console.log("ERROR => SessionStorage =>", e);
+        return false;
+    }
+};
+// Tüm SessionStorage anahtarlarını getir
+export var getSessionStorageAllKeys = function () {
+    if (!storageAvailable)
+        return [];
+    return Object.keys(sessionStorage);
+};
+// Tüm SessionStorage boyutunu getir
+export var getSessionStorageSize = function () {
+    if (!storageAvailable)
+        return 0;
+    var total = 0;
+    for (var key in sessionStorage) {
+        if (sessionStorage.hasOwnProperty(key)) {
+            total += sessionStorage[key].length + key.length;
+        }
+    }
+    return total;
+};

package/dist/esm/_lib/useInterval.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 29.01.2024 04:09
+ */
+export declare function useInterval(callback: any, delay: any): void;

package/dist/esm/_lib/useInterval.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 29.01.2024 04:09
+ */
+// source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+import { useEffect, useRef } from "react";
+export function useInterval(callback, delay) {
+    var savedCallback = useRef(null);
+    // Remember the latest callback.
+    useEffect(function () {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the interval.
+    useEffect(function () {
+        function tick() {
+            savedCallback && savedCallback.current && savedCallback.current();
+        }
+        if (delay !== null) {
+            var id_1 = setInterval(tick, delay);
+            return function () { return clearInterval(id_1); };
+        }
+    }, [delay]);
+}

package/dist/esm/alert/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export type typeAlert = {
+    defaultTimer?: string;
+    defaultErrorTimer?: string;
+    defaultSuccessTimer?: string;
+};
+export declare const Alert: ({ defaultTimer, defaultErrorTimer, defaultSuccessTimer }: typeAlert) => null;
+type typeAddAlert = {
+    type: "error" | "success" | "warning" | "info" | "loading";
+    message: string;
+    timer?: number | boolean;
+    style?: React.CSSProperties;
+};
+export declare const alert_add: ({ type, message, style, timer }: typeAddAlert) => false | HTMLDivElement | null;
+export declare const alert_remove: (alert: any) => void;
+export declare const alert_clear: () => boolean;
+export declare function alertCheck(response: any): void;
+export {};

package/dist/esm/alert/index.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import styles from "./index.module.css";
+var sAlertTimeout = [];
+export var Alert = function (_a) {
+    var _b = _a.defaultTimer, defaultTimer = _b === void 0 ? "5000" : _b, _c = _a.defaultErrorTimer, defaultErrorTimer = _c === void 0 ? "10000" : _c, _d = _a.defaultSuccessTimer, defaultSuccessTimer = _d === void 0 ? "5000" : _d;
+    useEffect(function () {
+        if (typeof window === "undefined")
+            return;
+        var divCheck = document.getElementById("salert");
+        if (!divCheck) {
+            // let div = document.createElement('div') as HTMLDivElement
+            var div = document.createElement("div");
+            div.setAttribute("id", "salert");
+            div.setAttribute("defaultTimer", defaultTimer);
+            div.setAttribute("defaultErrorTimer", defaultErrorTimer);
+            div.setAttribute("defaultSuccessTimer", defaultSuccessTimer);
+            var alertStyle = [
+                "position: fixed",
+                "bottom: 0",
+                "right: 0",
+                "max-width: 300px",
+                "max-height: 600px",
+                "overflow-x: hidden",
+                "padding: 15px",
+                "display: flex",
+                "flex-direction: column",
+                "z-index: 9999999"
+            ];
+            div.setAttribute("style", alertStyle.join(";"));
+            document.body.appendChild(div);
+        }
+    }, []);
+    return null;
+};
+export var alert_add = function (_a) {
+    var _b, _c, _d;
+    var type = _a.type, message = _a.message, style = _a.style, timer = _a.timer;
+    if (typeof window === "undefined")
+        return false;
+    var mainDiv = document.getElementById("salert");
+    if (mainDiv) {
+        var alert_1 = document.createElement("div");
+        mainDiv.prepend(alert_1);
+        var onClose_1 = function () {
+            if (mainDiv && alert_1 && mainDiv.contains(alert_1))
+                mainDiv.removeChild(alert_1);
+        };
+        var root = createRoot(alert_1);
+        var Component = (_jsxs("div", { className: "".concat(styles.salert, " ").concat(styles[type]), style: style, children: [_jsx("div", { className: styles.message, dangerouslySetInnerHTML: { __html: message } }), _jsx("div", { className: styles.close, onClick: onClose_1, children: "\u2715" })] }));
+        root.render(Component);
+        var defaultTimer = (_b = mainDiv.getAttribute("defaulttimer")) !== null && _b !== void 0 ? _b : "5000";
+        var defaultErrorTimer = (_c = mainDiv.getAttribute("defaulterrortimer")) !== null && _c !== void 0 ? _c : "10000";
+        var defaultSuccessTimer = (_d = mainDiv.getAttribute("defaultsuccesstimer")) !== null && _d !== void 0 ? _d : "5000";
+        var timerFilled = typeof timer === "number" && timer > 0;
+        var newTimer = timerFilled ? timer : defaultTimer;
+        switch (type) {
+            case "error":
+                newTimer = timerFilled ? timer : defaultErrorTimer;
+                break;
+            case "success":
+                newTimer = timerFilled ? timer : defaultSuccessTimer;
+                break;
+            default:
+                break;
+        }
+        newTimer = newTimer;
+        if (typeof timer !== "boolean") {
+            // False gelmişse sabit kalsın
+            if (newTimer > 0) {
+                var timeout = setTimeout(function () { return onClose_1(); }, newTimer);
+                sAlertTimeout.push(timeout);
+            }
+        }
+        return alert_1;
+    }
+    return null;
+};
+export var alert_remove = function (alert) {
+    if (typeof window === "undefined" || !alert)
+        return;
+    var mainDiv = document.getElementById("salert");
+    if (mainDiv && alert && mainDiv.contains(alert))
+        mainDiv.removeChild(alert);
+    return;
+};
+export var alert_clear = function () {
+    if (typeof window === "undefined")
+        return false;
+    sAlertTimeout.map(function (id) { return clearTimeout(id); });
+    var mainDiv = document.getElementById("salert");
+    if (mainDiv)
+        mainDiv.innerHTML = "";
+    return true;
+};
+export function alertCheck(response) {
+    if (response.data && response.data["alert"]) {
+        response.data["alert"].map(function (alert) {
+            alert_add({
+                type: alert.type,
+                message: alert.message,
+                timer: alert.timer
+            });
+        });
+    }
+}

package/dist/esm/alert/index.module.css

@@ -0,0 +1,119 @@
+.message {
+  flex: 1;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  padding: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  letter-spacing: 0;
+  transform: translate(-50%, -50%) scale(0);
+  transition: ease-in-out 0.2s;
+  border: 1px #97979740 solid;
+  box-shadow: 1px 1px 4px 0 #000000a6;
+  cursor: pointer;
+  background: inherit;
+}
+.close:hover {
+  zoom: 1.1;
+}
+.salert:hover .close {
+  transform: translate(-50%, -50%) scale(1);
+}
+.salert {
+  position: relative;
+  min-width: 50px;
+  width: fit-content;
+  margin: 6px 0 6px auto;
+  padding: 10px 15px;
+  border-radius: 5px;
+  cursor: default;
+  background: #1f1f1f;
+  color: rgba(255, 255, 255, 0.93);
+  border: 1px #97979740 solid;
+  box-shadow: 1px 1px 4px 0 #000000a6;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  animation: show 0.3s;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.error {
+  background: rgb(211, 47, 47);
+  background: linear-gradient(
+    135deg,
+    rgba(211, 47, 47, 1) 0%,
+    rgba(211, 47, 47, 0.8) 70%
+  );
+  color: rgba(255, 255, 255, 0.93);
+}
+
+.success {
+  background: rgb(67, 160, 71);
+  background: linear-gradient(
+    135deg,
+    rgba(67, 160, 71, 1) 0%,
+    rgba(67, 160, 71, 0.8) 70%
+  );
+  color: rgba(255, 255, 255, 0.93);
+}
+
+.info {
+  background: rgb(13, 141, 189);
+  background: linear-gradient(
+    135deg,
+    rgba(13, 141, 189, 1) 0%,
+    rgba(13, 141, 189, 0.8) 70%
+  );
+  color: rgba(255, 255, 255, 0.93);
+}
+
+.warning {
+  background: rgb(217, 142, 4);
+  background: linear-gradient(
+    135deg,
+    rgba(217, 142, 4, 1) 0%,
+    rgba(217, 142, 4, 0.8) 70%
+  );
+  color: rgba(255, 255, 255, 0.93);
+}
+
+.loading {
+  background: linear-gradient(
+    60deg,
+    rgb(15 33 34) 0%,
+    rgba(0, 172, 193, 1) 100%
+  );
+  color: rgba(255, 255, 255, 0.93);
+  animation: waves 50s infinite linear;
+}
+
+@keyframes show {
+  from {
+    transform: translateX(200%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes waves {
+  from {
+    background-position: 0;
+  }
+  to {
+    background-position: 100vw 0;
+  }
+}

package/dist/esm/box/Box.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    loading?: boolean;
+};
+export declare const Box: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/box/Box.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState } from "react";
+import styles from "./Box.module.css";
+export var Box = memo(function MemoFunction(_a) {
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.loading, loading = _b === void 0 ? false : _b;
+    var boxRef = useRef(null);
+    var _c = useState(false), hasContent = _c[0], setHasContent = _c[1];
+    useEffect(function () {
+        if (!boxRef.current)
+            return;
+        var found = boxRef.current.querySelector(".sbox_content");
+        setHasContent(!!found);
+    }, [children]);
+    return (_jsxs("div", { ref: boxRef, className: "sbox ".concat(styles.sbox, " ").concat(className || ""), style: style, children: [(hasContent && children) || _jsx("div", { className: styles.content, children: children }), loading && (_jsx("div", { className: styles.loading, children: _jsx("div", { className: styles.loading_spinner }) }))] }));
+});

package/dist/esm/box/Box.module.css

@@ -0,0 +1,153 @@
+.sbox {
+    position: relative;
+    max-width: 100%;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
+    border-radius: 8px;
+    overflow-y: auto;
+}
+
+.sbox h1,
+.sbox h2,
+.sbox h3,
+.sbox h4,
+.sbox h5,
+.sbox h6 {
+    margin: 0;
+    padding: 0;
+}
+
+.content {
+    padding: 20px;
+    box-sizing: border-box;
+    overflow: auto;
+}
+
+.header,
+.footer {
+    z-index: 1;
+    position: sticky;
+    padding: 12px 16px;
+    background: inherit;
+}
+.header {
+    top: 0;
+    border-bottom: 1px solid #00000020;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    /* margin: 10px 0 5px 0; */
+}
+.footer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    bottom: 0;
+    border-top: 1px solid #00000020;
+    background-color: #f7f7f7;
+}
+
+.icon {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    text-align: center;
+    
+}
+
+.title {
+    flex: 1;
+    font-size: 1.1rem;
+    font-weight: 500;
+    line-height: 1.5;
+}
+
+.menu {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+}
+.menu > * {
+    margin: 0 3px;
+}
+
+.loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #f4f7faa6;
+    overflow: hidden;
+    border-radius: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.loading::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, rgb(183 190 199 / 2%) 0, rgb(182 190 198 / 19%) 20%, rgb(183 190 199 / 2%) 60%, rgb(184 192 200 / 1%));
+    animation: shimmer 2s infinite;
+    content: "";
+}
+
+.loading_spinner {
+    position: relative;
+    margin: 6px;
+    width: 24px;
+    height: 24px;
+}
+.loading_spinner:before {
+    position: absolute;
+    display: block;
+    content: "";
+    z-index: 12;
+    top: 3px;
+    left: 3px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: #fff;
+}
+
+.loading_spinner:after {
+    position: absolute;
+    display: block;
+    content: "";
+    z-index: 11;
+    width: 18px;
+    height: 18px;
+    border-radius: 200px 0 0;
+    background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(69, 154, 215, 1) 50%, rgba(69, 154, 215, 1) 100%);
+    animation: loading_spinner 0.5s linear infinite;
+}
+
+@keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+@keyframes loading_spinner {
+    0% {
+        transform-origin: 100% 100%;
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform-origin: 100% 100%;
+        transform: rotate(360deg);
+    }
+}

package/dist/esm/box/BoxContent.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+interface Props {
+    className?: string;
+    style?: React.CSSProperties;
+    padding?: number;
+    children?: ReactNode;
+}
+export declare const BoxContent: ({ className, style, padding, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/box/BoxContent.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Box.module.css";
+export var BoxContent = function (_a) {
+    var className = _a.className, style = _a.style, padding = _a.padding, children = _a.children;
+    return (_jsx("div", { className: "".concat(styles.content, " sbox_content ").concat(className || ""), style: __assign(__assign({}, style), { padding: padding }), children: children }));
+};

package/dist/esm/box/BoxFooter.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    marginTop?: number;
+    align?: "flex-start" | "center" | "flex-end" | "stretch";
+}
+export declare const BoxFooter: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/box/BoxFooter.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import styles from "./Box.module.css";
+export var BoxFooter = memo(function FunctionMemo(_a) {
+    var children = _a.children, className = _a.className, style = _a.style, align = _a.align, marginTop = _a.marginTop;
+    return (_jsx("div", { className: "sbox_footer ".concat(styles.footer, " ").concat(className || ""), style: __assign({ marginTop: marginTop, justifyContent: align }, style), children: children }));
+});

package/dist/esm/box/BoxHeader.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+interface Props {
+    children?: ReactNode;
+    className?: string;
+    title?: string | ReactNode;
+    icon?: ReactNode;
+    menu?: ReactNode;
+    mainStyle?: React.CSSProperties;
+    iconStyle?: React.CSSProperties;
+    titleStyle?: React.CSSProperties;
+    menuStyle?: React.CSSProperties;
+    component?: any;
+    marginBottom?: number;
+}
+export declare const BoxHeader: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/box/BoxHeader.js

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import styles from './Box.module.css';
+export var BoxHeader = memo(function FunctionMemo(_a) {
+    var children = _a.children, className = _a.className, title = _a.title, icon = _a.icon, menu = _a.menu, mainStyle = _a.mainStyle, iconStyle = _a.iconStyle, titleStyle = _a.titleStyle, menuStyle = _a.menuStyle, marginBottom = _a.marginBottom, _b = _a.component, component = _b === void 0 ? 'div' : _b;
+    var Comp = component;
+    return (_jsxs("div", { className: "sbox_header ".concat(styles.header, " ").concat(className || ''), style: __assign({ marginBottom: marginBottom }, mainStyle), children: [icon && (_jsx("div", { className: styles.icon, style: iconStyle, children: icon })), _jsx(Comp, { className: "sbox_title ".concat(styles.title), style: titleStyle, children: children || title }), menu && (_jsx("div", { className: styles.menu, style: menuStyle, children: menu }))] }));
+});

package/dist/esm/box/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 29.01.2024 02:41
+ */
+export * from "./Box";
+export * from './BoxContent';
+export * from './BoxFooter';
+export * from './BoxHeader';

package/dist/esm/box/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023
+ *  @author: izzetseydaoglu
+ *  @last-modified: 29.01.2024 02:41
+ */
+export * from "./Box";
+export * from './BoxContent';
+export * from './BoxFooter';
+export * from './BoxHeader';

package/dist/esm/countDown/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+type Props = {
+    targetTime: number | string;
+    timerType?: 'countdown' | 'datetime';
+    speed?: number;
+    countType?: 'seconds' | 'minutes:seconds' | 'hours:minutes:seconds' | 'days:hours:minutes:seconds';
+    hide?: boolean;
+    onComplete?: () => void;
+    getStatus?: ({ days, hours, minutes, seconds, timer }: any) => void;
+    autoStart?: boolean;
+};
+export declare const useCountDown: ({ autoStart, onComplete, getStatus, targetTime, timerType, countType, speed, hide }: Props) => {
+    ComponentCountDown: (children: any) => React.FunctionComponentElement<{
+        ref: React.MutableRefObject<any>;
+    }> | null;
+    startCountDown: () => void;
+    stopCountDown: () => void;
+    setTargetTime: (targetTime: number | string) => void;
+    setTimerSpeed: (timerSpeed: number) => void;
+    getChildrenRef: () => any;
+};
+export {};