@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/getClientData/index.js

@@ -0,0 +1,208 @@
+import { DEFAULT_BREAKPOINTS } from "../../constants/DEFAULT_BREAKPOINTS";
+import { DEFAULT_MAX_ASP_RATIO } from "../../constants/DEFAULT_MAX_ASP_RATIO";
+import { DEFAULT_MIN_ASP_RATIO } from "../../constants/DEFAULT_MIN_ASP_RATIO";
+
+export const getClientData = ({
+    breakpoints = DEFAULT_BREAKPOINTS,
+    maxAspRatio = DEFAULT_MAX_ASP_RATIO,
+    minAspRatio = DEFAULT_MIN_ASP_RATIO,
+} = {}) => {
+
+    if (typeof window === "undefined" || typeof navigator === "undefined") {
+        return {
+            winW: 0,
+            winH: 0,
+            aspectRatio: 0,
+            language: "undefined",
+            timeZone: "undefined",
+            utcOffsetMinutes: 0,
+            utcOffsetHours: 0,
+
+            MAX_ASP_RATIO: maxAspRatio,
+            MIN_ASP_RATIO: minAspRatio,
+            isOutOfRatio: false,
+            isSafeSize: true,
+            currentBreakpoint: "Not found",
+            isMobile: false,
+
+            device: "unknown",
+            os: "unknown",
+            browser: "unknown",
+            urlMaxLength: 2048,
+
+
+            dpr: 1,
+            isRetina: false,
+            orientation: "unknown",
+
+            prefersDark: false,
+            prefersReducedMotion: false,
+            prefersContrastMore: false,
+
+            online: true,
+            connection: null,
+            deviceMemory: null,
+            hardwareConcurrency: null,
+            maxTouchPoints: 0,
+            hasTouch: false,
+            pointerCoarse: false,
+        };
+    }
+
+
+    const winW = window.innerWidth || document.documentElement.clientWidth || 0;
+    const winH = window.innerHeight || document.documentElement.clientHeight || 0;
+
+    const aspectRatioRaw = winH ? winW / winH : 0;
+    const aspectRatio = Number(aspectRatioRaw.toFixed(2));
+
+    const isMobile = winW < 601;
+
+
+
+    const isOutOfRatio = aspectRatio < maxAspRatio || aspectRatio > minAspRatio;
+    const isSafeSize = !isOutOfRatio;
+
+    const language = navigator.language || navigator.userLanguage || "undefined";
+    const userAgent = navigator.userAgent || "";
+
+
+    const device = /iPad|Tablet/i.test(userAgent)
+        ? "tablet"
+        : /Mobile/i.test(userAgent)
+          ? "mobile"
+          : /Macintosh|Mac OS/i.test(userAgent)
+            ? "mac"
+            : /Windows/i.test(userAgent)
+              ? "windows"
+              : /Linux/i.test(userAgent)
+                ? "linux"
+                : "unknown";
+
+    const os = /Windows NT/i.test(userAgent)
+        ? "windows"
+        : /Android/i.test(userAgent)
+          ? "android"
+          : /iPhone|iPad|iPod/i.test(userAgent)
+            ? "ios"
+            : /Mac OS X/i.test(userAgent)
+              ? "macOsX"
+              : /Linux/i.test(userAgent)
+                ? "linux"
+                : "unknown";
+
+    const browser = /Edg\//i.test(userAgent)
+        ? "edge"
+        : /Chrome\//i.test(userAgent) && !/Edg\//i.test(userAgent)
+          ? "chrome"
+          : /Safari\//i.test(userAgent) && !/Chrome\//i.test(userAgent) && !/Edg\//i.test(userAgent)
+            ? "safari"
+            : /Firefox\//i.test(userAgent)
+              ? "firefox"
+              : "unknown";
+
+
+    const urlMaxLength =
+        browser === "safari"
+            ? 1024
+            : browser === "firefox"
+              ? 2048
+              : browser === "chrome" || browser === "edge"
+                ? 2048
+                : 2048;
+
+
+    const currentBreakpoint = (() => {
+        for (const [breakpoint, range] of Object.entries(breakpoints)) {
+            const [min, max] = range;
+            if (winW >= min && winW < max) return breakpoint;
+        }
+        return "Not found";
+    })();
+
+
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const utcOffsetMinutes = -new Date().getTimezoneOffset();
+    const utcOffsetHours = utcOffsetMinutes / 60;
+
+
+    const dpr = window.devicePixelRatio || 1;
+    const isRetina = dpr >= 2;
+
+
+    const orientationType =
+        window.screen?.orientation?.type ||
+        (winW && winH ? (winW > winH ? "landscape" : "portrait") : "unknown");
+
+
+    const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ?? false;
+    const prefersReducedMotion =
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+    const prefersContrastMore = window.matchMedia?.("(prefers-contrast: more)")?.matches ?? false;
+
+
+    const online = navigator.onLine ?? true;
+    const net =
+        navigator.connection || navigator.mozConnection || navigator.webkitConnection || null;
+
+    const connection = net
+        ? {
+              effectiveType: net.effectiveType ?? null,
+              downlink: typeof net.downlink === "number" ? net.downlink : null,
+              rtt: typeof net.rtt === "number" ? net.rtt : null,
+              saveData: net.saveData ?? null,
+          }
+        : null;
+
+
+    const deviceMemory = navigator.deviceMemory ?? null;
+    const hardwareConcurrency = navigator.hardwareConcurrency ?? null;
+
+
+    const maxTouchPoints = navigator.maxTouchPoints ?? 0;
+    const hasTouch = maxTouchPoints > 0;
+    const pointerCoarse = window.matchMedia?.("(pointer: coarse)")?.matches ?? false;
+
+    /** Return */
+    return {
+        winW,
+        winH,
+        aspectRatio,
+        language,
+
+        timeZone,
+        utcOffsetMinutes,
+        utcOffsetHours,
+
+        MAX_ASP_RATIO: maxAspRatio,
+        MIN_ASP_RATIO: minAspRatio,
+        isOutOfRatio,
+        isSafeSize,
+        currentBreakpoint,
+        isMobile,
+
+        device,
+        os,
+        browser,
+        urlMaxLength,
+
+
+        dpr,
+        isRetina,
+        orientation: orientationType,
+
+        prefersDark,
+        prefersReducedMotion,
+        prefersContrastMore,
+
+        online,
+        connection,
+
+        deviceMemory,
+        hardwareConcurrency,
+
+        maxTouchPoints,
+        hasTouch,
+        pointerCoarse,
+    };
+};

package/src/libs/getPageRrdInfo/_dS.jsx

@@ -0,0 +1,78 @@
+import { useMemo } from "react";
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { getPageRrdInfo } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const X = () => {
+    const [pathname] = baseStore.useGlobal((s) => [s._reactRouterDom?.location?.pathname]);
+    const info = useMemo(() => getPageRrdInfo(), [pathname]);
+    const pretty = useMemo(() => JSON.stringify(info, null, 2), [info]);
+
+    return (
+        <Ds.page
+            title="getPageRrdInfo()"
+            releasedOn="1.0.0"
+            description={{ tr: "Aktif route'u globalData'dan okur (_preparedRoutes + güncel pathname). preparedRoutes ve pathname'i elle bağlamak yerine kullanın.", en: "Reads the active route from globalData (_preparedRoutes + current pathname). Use it instead of wiring preparedRoutes and pathname manually." }}
+        >
+            <Ds.block
+            title={{ tr: "Kullanım", en: "Usage" }}
+                code={`import { getPageRrdInfo } from "${SYS.basePath}";
+
+                   const { route, handle, relatives, pathname, preparedRoutesForLanguage } = getPageRrdInfo();
+                   // optional: getPageRrdInfo("/custom/path")`}
+                example={
+                    <Flex.column gap={8} padding={10} bgColor="backgrounds.shade10" full>
+                        <Typo.p balance>
+                            Live snapshot for the current DS route (updates when pathname changes):
+                        </Typo.p>
+                        <Typo.code copy content={pretty} />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="getPageRrdInfo(pathnameOverride?)"
+                props={{
+                    pathnameOverride: {
+                        description: { tr: "İsteğe bağlı pathname. Varsayılan globalData._reactRouterDom.location.pathname değeridir.", en: "Optional pathname. Defaults to globalData._reactRouterDom.location.pathname." },
+                        type: "string",
+                        defaultValue: null,
+                    },
+                }}
+                returns={{
+                    pathname: { description: { tr: "Normalize edilmiş aktif pathname.", en: "Normalized active pathname." }, type: "string" },
+                    language: { description: { tr: "Aktif globalData.language.", en: "Active globalData.language." }, type: "string" },
+                    route: {
+                        description: { tr: "Eşleşen hazırlanmış route nesnesi veya null.", en: "Matched prepared route object or null." },
+                        type: "object | null",
+                    },
+                    handle: { description: { tr: "route.handle veya null.", en: "route.handle or null." }, type: "object | null" },
+                    relatives: {
+                        description: { tr: "Dil değiştirme için handle.relatives map'i.", en: "handle.relatives map for language switching." },
+                        type: "object | null",
+                    },
+                    categories: {
+                        description: { tr: "prepareRoutes'tan gelen breadcrumb kategori yığını.", en: "Breadcrumb category stack from prepareRoutes." },
+                        type: "array | null",
+                    },
+                    languageRoute: {
+                        description: { tr: "setLanguage tarafından kullanılan snapshot (_languageRoute).", en: "Snapshot used by setLanguage (_languageRoute)." },
+                        type: "object | null",
+                    },
+                    preparedRoutes: {
+                        description: { tr: "Tam düzleştirilmiş route listesi.", en: "Full flattened route list." },
+                        type: "array",
+                    },
+                    preparedRoutesForLanguage: {
+                        description: { tr: "Aktif dile göre filtrelenmiş route'lar.", en: "Routes filtered by active language." },
+                        type: "array",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/getPageRrdInfo/index.js

@@ -0,0 +1,59 @@
+import { baseStore } from "../baseStore";
+import { typeOf } from "../typeOf";
+
+const trimSegment = (segment) => String(segment ?? "").replace(/^\/+|\/+$/g, "");
+
+export const normalizeAppPathname = (path) => {
+    if (path == null || path === "") return "/";
+    const trimmed = String(path).trim();
+    if (trimmed === "/") return "/";
+    const segment = trimSegment(trimmed);
+    return segment ? `/${segment}` : "/";
+};
+
+export const pathnamesMatch = (a, b) => normalizeAppPathname(a) === normalizeAppPathname(b);
+
+export const findPreparedRouteByPathname = (preparedRoutes, pathname) => {
+    if (!Array.isArray(preparedRoutes) || pathname == null) return null;
+    const target = normalizeAppPathname(pathname);
+    return (
+        preparedRoutes.find((route) => {
+            if (pathnamesMatch(route.path, target) || pathnamesMatch(`/${route.path}`, target)) {
+                return true;
+            }
+            const relatives = route?.handle?.relatives;
+            if (relatives && typeOf(relatives) === "object") {
+                return Object.values(relatives).some((relativePath) =>
+                    pathnamesMatch(relativePath, target),
+                );
+            }
+            return false;
+        }) ?? null
+    );
+};
+
+/**
+ * Current page RRD info from globalData (_preparedRoutes, _reactRouterDom, language).
+ * @param {string} [pathnameOverride] — defaults to active location pathname
+ */
+export const getPageRrdInfo = (pathnameOverride) => {
+    const gd = baseStore?.globalData?.get?.() || {};
+    const pathname =
+        pathnameOverride ?? gd._reactRouterDom?.location?.pathname ?? "/";
+    const preparedRoutes = gd._preparedRoutes ?? [];
+    const language = gd.language ?? gd.languageSettings?.defaultLanguage ?? "en";
+    const route = findPreparedRouteByPathname(preparedRoutes, pathname);
+    const handle = route?.handle ?? null;
+
+    return {
+        pathname: normalizeAppPathname(pathname),
+        language,
+        route,
+        handle,
+        relatives: handle?.relatives ?? null,
+        categories: handle?.categories ?? null,
+        languageRoute: gd._languageRoute ?? null,
+        preparedRoutes,
+        preparedRoutesForLanguage: preparedRoutes.filter((r) => r.handle?.language === language),
+    };
+};

package/src/libs/getText/_dS.jsx

@@ -0,0 +1,192 @@
+import { useMemo } from "react";
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { getText, getText as t } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { Button } from "../Button";
+import { Space } from "../Space";
+import { baseStore } from "../baseStore";
+
+const customLib = {
+    save: { tr: "Kaydet", en: "Save" },
+    cancel: { tr: "İptal", en: "Cancel" },
+};
+const customObj = { tr: "Kaydet", en: "Save" };
+
+const X = () => {
+    const [language, languageList, textLibrary] = baseStore.useGlobal((s) => [
+        s.language,
+        s.languageSettings?.languageList,
+        s.textLibrary,
+    ]);
+    const { output, output2, output3, set } = baseStore.useLocal({
+        output: null,
+        output2: null,
+        output3: null,
+    });
+    const { outputButtonProps, Output } = Ds.useOutputViewer();
+
+    const prettyTextLibrary = useMemo(
+        () => JSON.stringify(textLibrary ?? {}, null, 2),
+        [textLibrary],
+    );
+
+    return (
+        <Ds.page
+            title="getText()"
+            releasedOn="1.0.0"
+            description={
+                <>
+                    Resolves localized text entries.
+                    <br />
+                    <br />
+                    The text library is located at <i>'constants.TEXT_LIBRARY'</i> in the base code.
+                    Users can override the default text library with{" "}
+                    <i>'PROJECT_SETTINGS.textLibrary'</i>. Language is resolved in order:{" "}
+                    <i>localStorage.language</i>, then browser locale (if supported in{" "}
+                    <i>languageList</i> and <i>ignoreClientLanguage</i> is false), then{" "}
+                    <i>defaultLanguage</i>, then <i>en</i>. Route <i>handle.language</i> (from{" "}
+                    <i>prepareRoutes</i>) has the highest priority. Use your existing language
+                    switcher (e.g. <i>switchLanguage</i>) with <i>setStoredLanguage</i> from base if
+                    you persist the user choice.
+                    <br />
+                    <br />
+                    You can access the text library directly via <i>'globalData.textLibrary'</i>.
+                    Language Library and codes are available at <i>'constants.LANGUAGES'</i>. Check
+                    out the <Button.string to="/design-system/languages" label="<LANGUAGES>" /> page
+                    for more details.
+                    <br />
+                    <br />
+                    getText can also be used as the shortcut function <i>'t()'</i>.
+                </>
+            }
+        >
+            <Ds.block
+            title={{ tr: "Temel kullanım", en: "Basic Usage" }}
+                code={`import { getText } from "${SYS.basePath}";
+
+                        getText("copyContent");
+                        t("copyContent");`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex.column gap={0}>
+                            <Typo.span>Current Language: "{language}"</Typo.span>
+                            <Typo.span>Language List: {JSON.stringify(languageList)}</Typo.span>
+                        </Flex.column>
+                        <Flex gap={10}>
+                            <Button.plain
+                                label="getText('copyContent')"
+                                {...outputButtonProps({
+                                    path: "block1",
+                                    activeLabel: "bt1",
+                                    fn: getText("copyContent"),
+                                })}
+                            />
+                            <Button.plain
+                                label="t('backToHome')"
+                                {...outputButtonProps({
+                                    path: "block1",
+                                    activeLabel: "bt2",
+                                    fn: t("backToHome"),
+                                })}
+                            />
+                            <Button.plain
+                                label="Unknown text -> t('49')"
+                                {...outputButtonProps({
+                                    path: "block1",
+                                    activeLabel: "bt3",
+                                    fn: t("49"),
+                                })}
+                            />
+                        </Flex>
+                        <Space size="l" />
+                        <Output path="block1" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+            title={{ tr: "Özel kütüphane kullanımı", en: "Using a Custom Library" }}
+                code={`import { getText } from "${SYS.basePath}";
+
+                        getText("save", customLib);`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex.column gap={0}>
+                            <Typo.span>const customLib = {JSON.stringify(customLib)}</Typo.span>
+                        </Flex.column>
+                        <Button.plain
+                            label='getText("save", customLib)'
+                            {...outputButtonProps({
+                                path: "block2",
+                                activeLabel: "bt1",
+                                fn: getText("save", customLib),
+                            })}
+                        />
+                        <Space size="l" />
+                        <Output path="block2" />
+                    </Flex.column>
+                }
+            />
+            <Ds.block
+            title={{ tr: "Özel nesne kullanımı", en: "Using a Custom Object" }}
+                code={`import { getText } from "${SYS.basePath}";
+
+                        getText(customObj);`}
+                example={
+                    <Flex.column gap={10} padding={10} full>
+                        <Flex.column gap={0}>
+                            <Typo.span>const customObj = {JSON.stringify(customObj)}</Typo.span>
+                        </Flex.column>
+                        <Button.plain
+                            label="getText(customObj)"
+                            {...outputButtonProps({
+                                path: "block3",
+                                activeLabel: "bt1",
+                                fn: getText(customObj),
+                            })}
+                        />
+                        <Space size="l" />
+                        <Output path="block3" />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                disableLastBlock
+                args="const text = getText(keyOrEntry, overrideLibrary);"
+                props={{
+                    keyOrEntry: {
+                        description: { tr: "Metin anahtarı string'i veya dil nesnesi.", en: "Text key string or language object." },
+                        type: "string | object",
+                        required: true,
+                    },
+                    overrideLibrary: {
+                        description: { tr: "İsteğe bağlı metin kütüphanesi ezmesi.", en: "Optional text library override." },
+                        type: "object",
+                    },
+                }}
+                returnProps={{
+                    text: {
+                        description: { tr: "Geçerli dil için çözümlenmiş lokalize string.", en: "Resolved localized string for the current language." },
+                        type: "string",
+                    },
+                }}
+            />
+            <Ds.block
+                lastBlock
+                title={{ tr: "Geçerli textLibrary", en: "Current textLibrary" }}
+                description={{ tr: "Proje ayarları ve global veriden birleştirilmiş metin kütüphanesi.", en: "The merged text library from project settings and global data." }}
+                code={`import { baseStore } from "${SYS.basePath}";
+
+                       // in react
+                       const textLibrary = baseStore.useGlobal(s=>s.textLibrary);
+
+                       // in non-react
+                       const textLibrary = baseStore.globalData.get().textLibrary;`}
+                example={<Typo.code codeFormat={false}>{prettyTextLibrary}</Typo.code>}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/getText/index.js

@@ -0,0 +1,39 @@
+import { baseStore } from "../baseStore";
+
+const resolveLang = (overrideLibrary) => {
+    const gd = baseStore?.globalData?.get?.() || {};
+
+    return {
+        language: gd.language ?? gd.languageSettings?.defaultLanguage ?? "en",
+        textLibrary: overrideLibrary ?? gd.textLibrary ?? {},
+    };
+};
+
+export const getText = (keyOrEntry, overrideLibrary) => {
+    if (!keyOrEntry) return "";
+    const { language, textLibrary } = resolveLang(overrideLibrary);
+
+    if (typeof keyOrEntry === "object") {
+        const v = keyOrEntry[language];
+        if (v != null && v !== "") return v;
+        const en = keyOrEntry.en;
+        if (en != null && en !== "") return en;
+        const first = Object.values(keyOrEntry).find((x) => typeof x === "string" && x !== "");
+        return first ?? "";
+    }
+
+    if (typeof keyOrEntry === "string") {
+        const entry = textLibrary?.[keyOrEntry];
+
+        if (typeof entry === "string") return entry;
+
+        if (entry && typeof entry === "object") {
+            return entry[language] ?? keyOrEntry;
+        }
+
+        return keyOrEntry;
+    }
+
+    return "";
+};
+export const t = getText;