@sydsoft/base 1.47.0 → 1.49.0

package/_lib/storage/encData.ts

@@ -0,0 +1,41 @@
+import { isDev } from "../baseFunctions";
+
+const encDecDataKeys: number[] = [3, 5, 8, 11, 15, 22];
+
+export const encData = (data: object | string | number, keys: number[] = encDecDataKeys) => {
+  try {
+    const newJSON = { data: data };
+    const utf8Data = unescape(encodeURIComponent(JSON.stringify(newJSON))); // Dizeyi UTF-8'e dönüştür
+    let newData = btoa(utf8Data);
+    keys.map((value) => {
+      const randomChar = String.fromCharCode(Math.floor(Math.random() * (122 - 97 + 1)) + 97);
+      newData = newData.slice(0, value) + randomChar + newData.slice(value);
+    });
+    return newData;
+  } catch (e) {
+    isDev && console.log("ERROR => encData =>", e);
+    return "";
+  }
+};
+
+export const decData = (data: string, keys: number[] = encDecDataKeys) => {
+  try {
+    let decode = data;
+    keys.map((value, index) => {
+      const prevValue = keys[index - 1];
+      if (!prevValue) {
+        decode = decode.slice(0, value) + decode.slice(value + 1);
+      } else {
+        decode = decode.slice(0, value - index) + decode.slice(value - index + 1);
+      }
+    });
+    const decodedString = atob(decode);
+    const utf8DecodedString = decodeURIComponent(escape(decodedString));
+
+    const parse = JSON.parse(utf8DecodedString);
+    return parse?.data ?? "";
+  } catch (e) {
+    isDev && console.log("ERROR => decData =>", e);
+    return "";
+  }
+};

package/_lib/storage/localStorage.ts

@@ -0,0 +1,67 @@
+import { decData, encData } from './encData';
+
+import { isDev } from '../baseFunctions';
+
+const storageAvailable = typeof Storage === 'undefined' || !window.localStorage ? false : true;
+
+export const setLocalStorage = (key: string, value: any) => {
+    if (!storageAvailable) return false;
+    try {
+        localStorage.setItem(key, encData(value));
+        return true;
+    } catch (e) {
+        isDev && console.log('ERROR => localStorage =>', e);
+        return false;
+    }
+};
+
+export const getLocalStorage = (key: string) => {
+    if (!storageAvailable) return false;
+    try {
+        const saved = localStorage.getItem(key);
+        return saved ? decData(saved) : null;
+    } catch (e) {
+        isDev && console.log('ERROR => localStorage =>', e);
+        return null;
+    }
+};
+export const removeLocalStorage = (key: string) => {
+    if (!storageAvailable) return false;
+    try {
+        localStorage.removeItem(key);
+        return true;
+    } catch (e) {
+        isDev && console.log('ERROR => localStorage =>', e);
+        return false;
+    }
+};
+
+export const clearLocalStorage = () => {
+    if (!storageAvailable) return false;
+    try {
+        localStorage.clear();
+        return true;
+    } catch (e) {
+        isDev && console.log('ERROR => localStorage =>', e);
+        return false;
+    }
+};
+
+// Tüm localStorage anahtarlarını getir
+export const getLocalStorageAllKeys = (): string[] => {
+    if (!storageAvailable) return [];
+    return Object.keys(localStorage);
+};
+
+// Tüm localStorage boyutunu getir
+export const getLocalStorageSize = (): number => {
+    if (!storageAvailable) return 0;
+
+    let total = 0;
+    for (const key in localStorage) {
+        if (localStorage.hasOwnProperty(key)) {
+            total += localStorage[key].length + key.length;
+        }
+    }
+    return total;
+};

package/_lib/storage/sessionStorage.ts

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

package/_lib/useInterval.ts

@@ -0,0 +1,30 @@
+/**
+ * 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: any, delay: any) {
+  const savedCallback = useRef<any>(null);
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback && savedCallback.current && savedCallback.current();
+    }
+
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}

package/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/alert/index.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect } from "react";
+
+import { createRoot } from "react-dom/client";
+import styles from "./index.module.css";
+
+const sAlertTimeout: any[] = [];
+
+export type typeAlert = {
+    defaultTimer?: string;
+    defaultErrorTimer?: string;
+    defaultSuccessTimer?: string;
+};
+
+export const Alert = ({ defaultTimer = "5000", defaultErrorTimer = "10000", defaultSuccessTimer = "5000" }: typeAlert) => {
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+        const divCheck = document.getElementById("salert");
+        if (!divCheck) {
+            // let div = document.createElement('div') as HTMLDivElement
+            const div = document.createElement("div");
+            div.setAttribute("id", "salert");
+            div.setAttribute("defaultTimer", defaultTimer);
+            div.setAttribute("defaultErrorTimer", defaultErrorTimer);
+            div.setAttribute("defaultSuccessTimer", defaultSuccessTimer);
+            const 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;
+};
+
+type typeAddAlert = {
+    type: "error" | "success" | "warning" | "info" | "loading";
+    message: string;
+    timer?: number | boolean;
+    style?: React.CSSProperties;
+};
+
+export const alert_add = ({ type, message, style, timer }: typeAddAlert) => {
+    if (typeof window === "undefined") return false;
+    const mainDiv = document.getElementById("salert");
+    if (mainDiv) {
+        const alert = document.createElement("div");
+        mainDiv.prepend(alert);
+
+        const onClose = () => {
+            if (mainDiv && alert && mainDiv.contains(alert)) mainDiv.removeChild(alert);
+        };
+        const root = createRoot(alert!);
+        const Component = (
+            <div className={`${styles.salert} ${styles[type]}`} style={style}>
+                <div className={styles.message} dangerouslySetInnerHTML={{ __html: message }} />
+                <div className={styles.close} onClick={onClose}>
+                    ✕
+                </div>
+            </div>
+        );
+        root.render(Component);
+
+        const defaultTimer = mainDiv.getAttribute("defaulttimer") ?? "5000";
+        const defaultErrorTimer = mainDiv.getAttribute("defaulterrortimer") ?? "10000";
+        const defaultSuccessTimer = mainDiv.getAttribute("defaultsuccesstimer") ?? "5000";
+
+        const timerFilled = typeof timer === "number" && timer > 0;
+
+        let newTimer = timerFilled ? timer : defaultTimer;
+
+        switch (type) {
+            case "error":
+                newTimer = timerFilled ? timer : defaultErrorTimer;
+                break;
+            case "success":
+                newTimer = timerFilled ? timer : defaultSuccessTimer;
+                break;
+            default:
+                break;
+        }
+        newTimer = newTimer as number;
+
+        if (typeof timer !== "boolean") {
+            // False gelmişse sabit kalsın
+            if (newTimer > 0) {
+                const timeout = setTimeout(() => onClose(), newTimer);
+                sAlertTimeout.push(timeout);
+            }
+        }
+
+        return alert;
+    }
+    return null;
+};
+
+export const alert_remove = (alert: any): void => {
+    if (typeof window === "undefined" || !alert) return;
+    const mainDiv = document.getElementById("salert");
+    if (mainDiv && alert && mainDiv.contains(alert)) mainDiv.removeChild(alert);
+    return;
+};
+
+export const alert_clear = () => {
+    if (typeof window === "undefined") return false;
+    sAlertTimeout.map((id) => clearTimeout(id));
+    const mainDiv = document.getElementById("salert");
+    if (mainDiv) mainDiv.innerHTML = "";
+    return true;
+};
+
+export function alertCheck(response: any) {
+    if (response.data && response.data["alert"]) {
+        response.data["alert"].map(function (alert: any) {
+            alert_add({
+                type: alert.type,
+                message: alert.message,
+                timer: alert.timer
+            });
+        });
+    }
+}

package/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/box/Box.tsx

@@ -0,0 +1,33 @@
+import React, { memo, useEffect, useRef, useState } from "react";
+
+import styles from "./Box.module.css";
+
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    loading?: boolean;
+};
+
+export const Box = memo(function MemoFunction({ children, className, style, loading = false }: Props) {
+    const boxRef = useRef<HTMLDivElement>(null);
+
+    const [hasContent, setHasContent] = useState(false);
+    useEffect(() => {
+        if (!boxRef.current) return;
+        const found = boxRef.current.querySelector(".sbox_content");
+        setHasContent(!!found);
+    }, [children]);
+
+    return (
+        <div ref={boxRef} className={`sbox ${styles.sbox} ${className || ""}`} style={style}>
+            {(hasContent && children) || <div className={styles.content}>{children}</div>}
+
+            {loading && (
+                <div className={styles.loading}>
+                    <div className={styles.loading_spinner} />
+                </div>
+            )}
+        </div>
+    );
+});

package/box/BoxContent.tsx

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+
+import styles from "./Box.module.css";
+
+interface Props {
+    className?: string;
+    style?: React.CSSProperties;
+    padding?: number;
+    children?: ReactNode;
+}
+
+export const BoxContent = ({ className, style, padding, children }: Props) => {
+    return (
+        <div className={`${styles.content} sbox_content ${className || ""}`} style={{ ...style, padding }}>
+            {children}
+        </div>
+    );
+};

package/box/BoxFooter.tsx

@@ -0,0 +1,25 @@
+import React, { memo } from "react";
+
+import styles from "./Box.module.css";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    marginTop?: number;
+    align?: "flex-start" | "center" | "flex-end" | "stretch";
+}
+
+export const BoxFooter = memo(function FunctionMemo({ children, className, style, align, marginTop }: Props) {
+    return (
+        <div
+            className={`sbox_footer ${styles.footer} ${className || ""}`}
+            style={{
+                marginTop,
+                justifyContent: align,
+                ...style
+            }}>
+            {children}
+        </div>
+    );
+});