@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/@Base/ErrorPage/_styled.js

@@ -0,0 +1,98 @@
+import styled, { css } from "styled-components";
+import { Link } from "react-router-dom";
+
+export const S = {
+    container: styled.div`
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        width: 100%;
+        height: 100vh;
+        padding: 100rem;
+        box-sizing: border-box;
+        overflow: hidden;
+
+        ${({ theme }) =>
+            theme.responsive(
+                "phone,tablet",
+                css`
+                    padding: 20rem;
+                `,
+            )};
+    `,
+    code: styled.span`
+        position: absolute;
+        top: 0;
+        left: 0;
+        line-height: 0.8;
+        font-size: 400rem;
+        font-weight: 600;
+        opacity: 0.05;
+        letter-spacing: -20rem;
+        white-space: nowrap;
+        ${({ theme }) =>
+            theme.responsive(
+                "phone,tablet",
+                css`
+                    font-size: 200rem;
+                `,
+            )};
+    `,
+    title: styled.h1`
+        font-size: 20rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        line-height: 1;
+    `,
+    description: styled.p`
+        font-size: 15rem;
+        line-height: 1;
+    `,
+    error: styled.pre`
+        margin-top: 16rem;
+        opacity: 0.7;
+        white-space: pre-wrap;
+    `,
+    footer: styled.div`
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        opacity: 0.5;
+        width: 100%;
+        text-align: right;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 5rem 20rem;
+    `,
+    link: styled(Link)`
+        margin-top: 50rem;
+        color: inherit;
+        font-size: 16rem;
+        line-height: 1;
+        transition: opacity 0.3s ease;
+
+        &:hover {
+            opacity: 1;
+        }
+        &:active {
+            text-decoration: none;
+        }
+
+        ${({ theme }) =>
+            theme.responsive(
+                "phone,tablet",
+                css`
+                    font-size: 20rem;
+                `,
+            )};
+    `,
+    linkArea: styled.div`
+        display: flex;
+        gap: 10rem;
+        justify-content: flex-start;
+        align-items: center;
+    `,
+};

package/src/libs/@Base/ErrorPage/index.jsx

@@ -0,0 +1,109 @@
+import {
+    useRouteError,
+    isRouteErrorResponse,
+    useSearchParams,
+    useNavigate,
+} from "react-router-dom";
+import { API_RESPONSE_CODES } from "../../../constants/API_RESPONSE_CODES";
+import { baseStore } from "../../baseStore";
+import { S } from "./_styled";
+import { useMemo } from "react";
+import { getText as t } from "../../getText";
+
+const DEFAULT_CODE = 500;
+
+const normalizeCode = (x) => {
+    const n = Number(x);
+    return Number.isFinite(n) ? n : null;
+};
+
+const splitOnFirstDotOrColon = (str) => {
+    const iDot = str.indexOf(".");
+    const iColon = str.indexOf(":");
+
+    let idx;
+    if (iDot === -1) idx = iColon;
+    else if (iColon === -1) idx = iDot;
+    else idx = Math.min(iDot, iColon);
+
+    if (idx === -1) return [str];
+
+    return [str.slice(0, idx), str];
+};
+
+const getCodeFromRouteError = (err) => {
+    if (!err) return null;
+
+    if (isRouteErrorResponse(err)) return err.status;
+
+    if (typeof err === "object" && err && "status" in err) {
+        const c = normalizeCode(err.status);
+        if (c != null) return c;
+    }
+
+    if (typeof err === "object" && err && "statusCode" in err) {
+        const c = normalizeCode(err.statusCode);
+        if (c != null) return c;
+    }
+
+    return null;
+};
+
+const pickI18n = (meta, lang = "en") => {
+    if (!meta || typeof meta !== "object") {
+        return { title: "Error", description: "Unexpected error." };
+    }
+    const entry = meta[lang] || meta.en || meta.tr || meta.unknown;
+    if (entry && typeof entry === "object") return entry;
+    return { title: "Error", description: "Unexpected error." };
+};
+
+export const ErrorPage = ({ defaultCode }) => {
+    const err = useRouteError();
+    const [sp] = useSearchParams();
+    const [lang] = baseStore?.useGlobal?.((s) => [s.language]) || ["en"];
+    const navigate = useNavigate();
+    const codeFromErr = getCodeFromRouteError(err);
+    const codeFromQuery = normalizeCode(sp.get("code"));
+    const code = codeFromErr ?? codeFromQuery ?? defaultCode ?? DEFAULT_CODE;
+    const meta =
+        API_RESPONSE_CODES[code] || API_RESPONSE_CODES.unknown || API_RESPONSE_CODES[DEFAULT_CODE];
+    const { title, description } = pickI18n(meta, lang);
+    const [preparedTitle, preparedDescription] = useMemo(() => {
+        const msg = String(err?.message || err);
+        if (!msg || msg === "null") {
+            return [title, description];
+        }
+        return splitOnFirstDotOrColon(msg);
+    }, [err, lang]);
+
+    return (
+        <S.container>
+            <S.code>{code || ""}</S.code>
+            <S.title>{preparedTitle}</S.title>
+            <S.description>{preparedDescription}</S.description>
+            <S.linkArea>
+                <S.link to="/">{t("backToHome")}</S.link>
+                <S.link
+                    to="#"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        navigate(-1);
+                    }}
+                >
+                    {t("tryAgain")}
+                </S.link>
+                <S.link
+                    to="#"
+                    onClick={(e) => {
+                        e.preventDefault();
+                        window.location.reload();
+                    }}
+                >
+                    {t("refreshPage")}
+                </S.link>
+            </S.linkArea>
+            <S.footer>@bariskuran/base</S.footer>
+        </S.container>
+    );
+};

package/src/libs/@Base/GlobalDataAndRouter/index.jsx

@@ -0,0 +1,100 @@
+import { RouterProvider, createBrowserRouter, Outlet, Navigate } from "react-router-dom";
+import { lazy, Suspense, useMemo } from "react";
+import { baseStore } from "../../baseStore";
+import { GlobalDataProvider } from "../GlobalDataProvider";
+import { IdleManager } from "../../IdleManager";
+import { ErrorPage } from "../ErrorPage";
+import { LanguageManager } from "../LanguageManager";
+import { PageLoadingManager } from "../loadingQueueManager";
+import { NotifierListener } from "helpers/NotifierListener";
+
+// Keep the dynamic import itself behind a compile-time condition. The previous
+// callback always contained an import(), so Vite emitted the entire Design System
+// chunk graph even when its route was disabled.
+const CAN_LOAD_DESIGN_SYSTEM =
+    import.meta.env.DEV || import.meta.env.VITE_ENABLE_DESIGN_SYSTEM === "true";
+
+const LazyDesignSystemRoutes = CAN_LOAD_DESIGN_SYSTEM
+    ? lazy(() => import("../../DesignSystem/Routes.jsx"))
+    : null;
+
+const getDesignSystemRoutes = () => {
+    if (!CAN_LOAD_DESIGN_SYSTEM || !LazyDesignSystemRoutes) return [];
+
+    return [
+        {
+            path: "design-system/*",
+            element: (
+                <Suspense fallback={null}>
+                    <LazyDesignSystemRoutes />
+                </Suspense>
+            ),
+        },
+    ];
+};
+
+export const CoreRRDLayout = ({ routes, preparedRoutes, projectSettings }) => {
+    const [isGlobalReady, isThemeReady] = baseStore.useGlobal((s) => [
+        s.isGlobalReady,
+        s.isThemeReady,
+    ]);
+
+    if (!isGlobalReady || !isThemeReady)
+        return (
+            <GlobalDataProvider
+                projectSettings={projectSettings}
+                routes={routes}
+                preparedRoutes={preparedRoutes}
+            />
+        );
+    return (
+        <>
+            <GlobalDataProvider
+                key="global-data-provider"
+                projectSettings={projectSettings}
+                routes={routes}
+                preparedRoutes={preparedRoutes}
+            />
+            <IdleManager key="idle-manager" />
+            <LanguageManager key="language-manager" />
+            <PageLoadingManager key="page-loading-manager" />
+            <NotifierListener key="notifier-listener" />
+            <Outlet key="outlet" />
+        </>
+    );
+};
+
+export const GlobalDataAndRouter = ({ routes, preparedRoutes = [], projectSettings }) => {
+    const [isGlobalReady, isThemeReady, showInternalDs] =
+        baseStore.useGlobal((s) => [
+            s.isGlobalReady,
+            s.isThemeReady,
+            !!s._adminSettings?.showInternalDs,
+        ]);
+    const isReady = isGlobalReady && isThemeReady;
+
+    const router = useMemo(
+        () =>
+            createBrowserRouter([
+                {
+                    element: (
+                        <CoreRRDLayout
+                            projectSettings={projectSettings}
+                            routes={routes}
+                            preparedRoutes={preparedRoutes}
+                        />
+                    ),
+                    errorElement: <ErrorPage defaultCode={500} />,
+                    children: [
+                        ...(isReady ? routes : []),
+                        ...getDesignSystemRoutes(),
+                        { path: "*", element: <Navigate to="/error?code=404" replace /> },
+                        { path: "/error", element: <ErrorPage defaultCode={500} /> },
+                    ],
+                },
+            ]),
+        [routes, preparedRoutes, isReady, showInternalDs, projectSettings],
+    );
+    if (!isThemeReady) return null;
+    return <RouterProvider router={router} />;
+};

package/src/libs/@Base/GlobalDataProvider/index.js

@@ -0,0 +1,277 @@
+import { useEffect, useLayoutEffect, useMemo, useCallback } from "react";
+import { useNavigate, useLocation, useParams, useSearchParams, useMatches } from "react-router-dom";
+import { baseStore } from "../../baseStore";
+import { getClientData } from "../../getClientData";
+import { createBaseDatePackage } from "../../baseDate/createBaseDatePackage";
+import { notifierFunctions } from "../../notifier/_Base";
+import { TEXT_LIBRARY } from "../../../constants/TEXT_LIBRARY";
+import { useEventListener } from "../../useEventListener";
+import { loadingApi } from "../loadingQueueManager";
+import { VALIDATION_RULES } from "../../../constants/VALIDATION_RULES";
+import { useEffectAfterMount } from "../../useEffectAfterMount";
+import {
+    getIgnoreClientLanguage,
+    getLanguageSettings,
+    getPageLanguageFromMatches,
+    resolveInitialLanguage,
+} from "./resolveLanguage";
+
+export const GlobalDataProvider = ({ projectSettings, routes, preparedRoutes = [] }) => {
+    const {
+        notifierSettings = {},
+        baseDateSettings = {},
+        iconsLibrary = {},
+        idleManagerSettings = {},
+        styledSettings = {},
+        adminSettings = {},
+        textLibrary: usersTextLibrary = {},
+        baseFetchSettings = {},
+        baseFormSettings = {},
+        validationRules = {},
+    } = projectSettings || {};
+
+    const languageSettingsConfig = useMemo(
+        () => getLanguageSettings(projectSettings),
+        [projectSettings],
+    );
+
+    const ignoreClientLanguage = getIgnoreClientLanguage(projectSettings);
+
+    const navigate = useNavigate();
+    const location = useLocation();
+    const params = useParams();
+    const [searchParams] = useSearchParams();
+    const matches = useMatches();
+    const searchParamsObj = useMemo(() => Object.fromEntries(searchParams), [searchParams]);
+
+    const pageLanguage = useMemo(
+        () => getPageLanguageFromMatches(matches, languageSettingsConfig.languageList),
+        [matches, languageSettingsConfig.languageList, location.pathname],
+    );
+
+    const navigateWithSearch = useCallback(
+        (pathname, search) => {
+            navigate({ pathname, search: search || location.search });
+        },
+        [navigate, location.search],
+    );
+
+    const getCD = useCallback(() => {
+        return getClientData({
+            breakpoints: styledSettings.breakpoints,
+            maxAspRatio: styledSettings.maxAspRatio,
+            minAspRatio: styledSettings.minAspRatio,
+        });
+    }, [styledSettings.breakpoints, styledSettings.maxAspRatio, styledSettings.minAspRatio]);
+
+    // Icons, theme-aware props and route data are consumed by the initial route
+    // render. Populate the global store before the browser paints.
+    useLayoutEffect(() => {
+        const clientData = getCD();
+        const currGlobalData = baseStore.globalData.get();
+
+        try {
+            baseStore.globalData.set({
+                ...currGlobalData,
+                languageSettings: languageSettingsConfig,
+                textLibrary: { ...TEXT_LIBRARY, ...(usersTextLibrary || {}) },
+                isGlobalReady: true,
+                _projectSettings: projectSettings,
+                _routes: routes,
+                _preparedRoutes: preparedRoutes,
+                sitemap: projectSettings?.rrdSettings?.SITEMAP,
+                language: resolveInitialLanguage({
+                    pageLanguage,
+                    languageSettings: languageSettingsConfig,
+                    clientData,
+                    ignoreClientLanguage,
+                }),
+
+
+                isLoading: false,
+                isLoadingPage: false,
+                isLoadingApi: false,
+                _loadingManager: {
+                    apiQueue: [],
+                    api: loadingApi,
+                },
+
+
+                _baseFetchSettings: {
+                    disableLoadingApi: false,
+                    disableAuth: false,
+                    getTokenFrom: null,
+                    token: null,
+                    cacheTime: 10,
+                    envUrl: null,
+                    responseErrorPaths: [],
+                    ...baseFetchSettings,
+                },
+
+
+                _clientData: {
+                    ...clientData,
+                },
+
+
+                _iconsLibrary: iconsLibrary,
+
+
+                _adminSettings: {
+                    showInternalDs: false,
+                    ...adminSettings,
+                },
+
+
+                _notifier: {
+                    killAfter: 5,
+                    closingDelay: 0.5,
+                    disableNotifier: false,
+                    disableAutoKill: false,
+                    variant: null,
+                    ...notifierSettings,
+                    queue: [],
+                    count: 0,
+                    add: notifierFunctions.add,
+                    remove: notifierFunctions.remove,
+                    clear: notifierFunctions.clear,
+                },
+
+
+                _baseDate: {
+                    defaultFormat: "DD/MM/YYYY",
+                    firstDayOfWeek: 1,
+                    timezone: clientData.timeZone,
+                    ...baseDateSettings,
+                    package: createBaseDatePackage(),
+                },
+
+
+                _idleManager: {
+                    enabled: true,
+                    allowedIdleTime: 30,
+                    onIdle: null,
+                    onActive: null,
+                    ...idleManagerSettings,
+                },
+
+
+                _reactRouterDom: {
+                    navigate,
+                    navigateWithSearch,
+                    location,
+                    params,
+                    searchParams: searchParamsObj,
+                },
+
+
+                _baseForm: {
+                    ...baseFormSettings,
+                },
+
+
+                _validationRules: {
+                    ...VALIDATION_RULES,
+                    ...validationRules,
+                },
+            });
+        } catch (error) {
+            console.error("GlobalDataProvider: Failed to set globalData", error);
+        }
+    }, []);
+
+    useEffectAfterMount(() => {
+        const currentGlobalData = baseStore.globalData.get();
+
+        baseStore.globalData.set({
+            ...currentGlobalData,
+            languageSettings: languageSettingsConfig,
+            _projectSettings: projectSettings,
+            _notifier: {
+                ...currentGlobalData._notifier,
+                ...notifierSettings,
+            },
+            _baseDate: {
+                ...currentGlobalData._baseDate,
+                ...baseDateSettings,
+            },
+            _iconsLibrary: iconsLibrary,
+            _adminSettings: {
+                ...currentGlobalData._adminSettings,
+                ...adminSettings,
+            },
+            _idleManager: {
+                ...currentGlobalData._idleManager,
+                ...idleManagerSettings,
+            },
+            language: resolveInitialLanguage({
+                pageLanguage,
+                languageSettings: languageSettingsConfig,
+                clientData: currentGlobalData._clientData,
+                ignoreClientLanguage,
+            }),
+        });
+    }, [projectSettings, languageSettingsConfig, ignoreClientLanguage, pageLanguage]);
+
+    useEffectAfterMount(() => {
+        baseStore.globalData.set((s) => {
+            delete s.languageList;
+            delete s.defaultLanguage;
+        });
+    }, []);
+
+    useEffectAfterMount(() => {
+        baseStore.globalData.set((s) => {
+            s._routes = routes;
+            s._preparedRoutes = preparedRoutes;
+            s.sitemap = projectSettings?.rrdSettings?.SITEMAP;
+        });
+    }, [routes, preparedRoutes, projectSettings?.rrdSettings?.SITEMAP]);
+
+    const updateClientData = () => {
+        const generatedClientData = getCD();
+        baseStore.globalData.set((s) => {
+            s._clientData = generatedClientData;
+            s._baseDate.timezone = generatedClientData.timeZone;
+        });
+    };
+    useEventListener("resize", updateClientData, { getFirst: false });
+    useEffectAfterMount(updateClientData, [
+        styledSettings.breakpoints,
+        styledSettings.maxAspRatio,
+        styledSettings.minAspRatio,
+    ]);
+
+    useEffectAfterMount(() => {
+        baseStore.globalData.set((s) => {
+            s._reactRouterDom = {
+                navigate,
+                navigateWithSearch,
+                location,
+                params,
+                searchParams: searchParamsObj,
+            };
+        });
+    }, [navigate, navigateWithSearch, location, params, searchParamsObj]);
+
+    useEffectAfterMount(() => {
+        baseStore.globalData.set((s) => {
+            s._baseFetchSettings = {
+                ...s._baseFetchSettings,
+                ...baseFetchSettings,
+            };
+        });
+    }, [baseFetchSettings]);
+
+    useEffectAfterMount(() => {
+        baseStore.globalData.set((s) => {
+            s._baseFormSettings = {
+                ...s._baseFormSettings,
+                ...baseFormSettings,
+            };
+        });
+    }, [baseFormSettings]);
+
+
+    return null;
+};