@opexa/portal-components 0.0.460 → 0.0.462

package/dist/components/Maya/Maya.d.ts

@@ -1 +1,26 @@
-export declare function Maya(): import("react/jsx-runtime").JSX.Element;
+import { type ImageProps } from 'next/image';
+export interface ClassNameEntries {
+    root?: string;
+    banner?: string;
+    logo?: string;
+    progressRoot?: string;
+    progressTrack?: string;
+    progressTrackCompleteBG?: string;
+    progressTrackIncompleteBG?: string;
+    progressTrackOuter?: string;
+    progressTrackInner?: string;
+    progressBar?: string;
+    progressLabel?: string;
+    licensedBy?: string;
+    pagcorLogo?: string;
+    responsibleGamingLogo?: string;
+}
+interface MayaProps {
+    logo: ImageProps['src'];
+    responsibleGamingLogo?: ImageProps['src'];
+    pagcorLogo?: ImageProps['src'];
+    banner?: ImageProps['src'];
+    className?: string | ClassNameEntries;
+}
+export declare function Maya({ logo, responsibleGamingLogo, pagcorLogo, banner, className, }: MayaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Maya/Maya.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
+import { isString } from 'lodash-es';
+import Image, {} from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -9,8 +10,9 @@ import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
 import { signOut } from '../../client/services/signOut.js';
 import { toaster } from '../../client/utils/toaster.js';
-import pagcorLogo from '../../images/pagcor.png';
-export function Maya() {
+import pagcorLogoDefault from '../../images/pagcor2.png';
+import responsibleGamingLogoDefault from '../../images/responsible-gaming.png';
+export function Maya({ logo, responsibleGamingLogo, pagcorLogo, banner, className, }) {
     const signIn = useSignInMutation();
     const router = useRouter();
     const searchParams = useSearchParams();
@@ -20,24 +22,22 @@ export function Maya() {
     const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
     const session = useSessionQuery();
     const mayaSessionId = searchParams.get('sessionId');
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
     const init = async () => {
         setProgress(25);
-        /* Decide when a session already exists */
         if (session.data) {
-            /* Is there a maya session id? */
             if (mayaSessionId) {
-                /* Is the maya session id new? */
                 if (localStorage.getItem(mayaSessIdKey) === mayaSessionId) {
                     setProgress(100);
                     return;
                 }
                 setProgress(50);
-                /* Need to remove existing session and create a new one */
                 await signOut();
                 await sleep(1000);
             }
             else {
-                /* No new maya session ID? use existing session */
                 setProgress(100);
                 return;
             }
@@ -47,10 +47,7 @@ export function Maya() {
             throw new Error('Maya session ID is required');
         }
         await new Promise((resolve, reject) => {
-            signIn.mutate({
-                type: 'MAYA',
-                session: mayaSessionId,
-            }, {
+            signIn.mutate({ type: 'MAYA', session: mayaSessionId }, {
                 onSuccess: () => {
                     setProgress(100);
                     setComplete(true);
@@ -86,6 +83,5 @@ export function Maya() {
         };
         runInit();
     }, []);
-    return (_jsx("div", { className: "relative flex min-h-screen flex-col border dark:bg-[#1F242F]", children: _jsxs("div", { className: "absolute bottom-0 w-full shrink-0 bg-[#F9FAFB] p-6 dark:bg-[#161B26]", children: [_jsxs("div", { className: "mt-4", children: [_jsx("div", { className: twMerge('overflow-hidden rounded-full p-px', !complete && 'bg-[#D0D5DD] dark:bg-[#333741]', complete &&
-                                'bg-gradient-to-r from-[#FFDE21] via-[#FFD012] to-[#FFBF00]'), id: "progress:root", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, "aria-labelledby": "progress:label", children: _jsx("div", { className: "rounded-full bg-[#F2F4F7] p-px dark:bg-[#1F242F]", children: _jsx("div", { className: "relative h-4 w-full overflow-hidden rounded-full bg-white", children: _jsx("div", { className: twMerge('absolute left-0 h-full rounded-full bg-gradient-to-r from-[#FFDE21] via-[#FFBF00] to-[#FF9442] transition-all duration-150'), style: { width: `${progress}%` } }) }) }) }), _jsxs("span", { id: "progress:label", className: "mt-3 block text-center text-[#344054] text-sm dark:text-[#CECFD2]", children: [progress, "% Loading..."] })] }), _jsxs("div", { className: "mt-7 flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-[#475467] text-xs dark:text-[#94969C]", children: "Officially Licensed by" }), _jsx(Image, { src: pagcorLogo, alt: "Pagcor Logo", height: 30, width: 30, className: "w-auto shrink-0" })] })] }) }));
+    return (_jsxs("div", { className: twMerge('relative flex min-h-screen flex-col', classNames.root), children: [banner && (_jsx(Image, { src: banner, alt: "brand logo", height: 50, width: 120, className: twMerge('w-full grow object-cover object-top', classNames.banner) })), _jsxs("div", { className: twMerge('absolute bottom-0 w-full shrink-0 bg-[#1F1F1F] p-6', classNames.progressRoot), children: [_jsxs("div", { children: [_jsx(Image, { src: logo, alt: "brand logo", height: 50, width: 120, className: twMerge('mx-auto mb-5 h-12.5 w-auto', classNames.logo) }), _jsx("div", { className: twMerge('overflow-hidden rounded-full p-px', !complete && (classNames.progressTrackIncompleteBG ?? 'bg-[#373A41]'), complete && (classNames.progressTrackCompleteBG ?? 'bg-[#ffb300]'), classNames.progressTrack), id: "progress:root", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, "aria-labelledby": "progress:label", children: _jsx("div", { className: twMerge('rounded-full bg-[#1F1F1F] p-px', classNames.progressTrackOuter), children: _jsx("div", { className: twMerge('relative h-4 w-full overflow-hidden rounded-full bg-[#22262e]', classNames.progressTrackInner), children: _jsx("div", { className: twMerge('absolute left-0 h-full rounded-full bg-[#ffb300] transition-all duration-150', classNames.progressBar), style: { width: `${progress}%` } }) }) }) }), _jsxs("span", { id: "progress:label", className: twMerge('mt-3 block text-center text-[#CECFD2] text-sm', classNames.progressLabel), children: [progress, "% Loading..."] })] }), _jsxs("div", { className: twMerge('mt-7 flex items-center justify-center gap-2 text-[#94969C] text-xs', classNames.licensedBy), children: [_jsx("span", { children: "Officially Licensed by" }), _jsx(Image, { src: pagcorLogo ?? pagcorLogoDefault, alt: "PAGCOR logo", height: 43, width: 88, className: twMerge('h-[43px] w-auto shrink-0', classNames.pagcorLogo), draggable: false, unoptimized: true }), _jsx(Image, { src: responsibleGamingLogo ?? responsibleGamingLogoDefault, alt: "Responsible Gaming logo", height: 50, width: 186, className: twMerge('h-[50px] w-auto shrink-0', classNames.responsibleGamingLogo), draggable: false, unoptimized: true })] })] })] }));
 }

package/dist/components/TopProgress/TopProgressBar.d.ts

@@ -0,0 +1,6 @@
+type TopProgressBarPreset = 'Sunset' | 'Poppy' | 'Rosebud' | 'Sunshine' | 'Gold' | 'Twilight' | 'Powder' | 'Holly' | 'Northern Lights' | 'Raw Green' | 'Lime' | 'Nemesia' | 'Snowflake' | 'Blue Bird' | 'Blueprint' | 'Salvia' | 'Heartsease' | 'Amaranthus' | 'Candy' | 'Verbena';
+export declare const TopProgressBar: ({ preset, customPreset, }: {
+    preset?: TopProgressBarPreset;
+    customPreset?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TopProgress/TopProgressBar.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+// CSS gradient presets (inline styles), approximate Tailwind palette colors
+// --> check presets here <3 https://www.creative-tim.com/twcomponents/gradient-generator
+const PRESET_BG = {
+    Sunset: 'linear-gradient(90deg, #ef4444 0%, #f97316 100%)',
+    Poppy: 'linear-gradient(90deg, #fb7185 0%, #ef4444 100%)',
+    Rosebud: 'linear-gradient(90deg, #ec4899 0%, #f43f5e 100%)',
+    Sunshine: 'linear-gradient(90deg, #fde68a 0%, #facc15 100%)',
+    Gold: 'linear-gradient(90deg, #fde68a 0%, #eab308 100%)',
+    Twilight: 'linear-gradient(90deg, #f59e0b 0%, #ec4899 100%)',
+    Powder: 'linear-gradient(90deg, #ddd6fe 0%, #fbcfe8 100%)',
+    Holly: 'linear-gradient(90deg, #bfdbfe 0%, #a5f3fc 100%)',
+    'Northern Lights': 'linear-gradient(90deg, #99f6e4 0%, #14b8a6 100%)',
+    'Raw Green': 'linear-gradient(90deg, #a3e635 0%, #84cc16 100%)',
+    Lime: 'linear-gradient(90deg, #2dd4bf 0%, #fef08a 100%)',
+    Nemesia: 'linear-gradient(90deg, #34d399 0%, #22d3ee 100%)',
+    Snowflake: 'linear-gradient(90deg, #d946ef 0%, #22d3ee 100%)',
+    'Blue Bird': 'linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%)',
+    Blueprint: 'linear-gradient(90deg, #6366f1 0%, #3b82f6 100%)',
+    Salvia: 'linear-gradient(90deg, #2563eb 0%, #7c3aed 100%)',
+    Heartsease: 'linear-gradient(90deg, #c026d3 0%, #db2777 100%)',
+    Amaranthus: 'linear-gradient(90deg, #c026d3 0%, #9333ea 100%)',
+    Candy: 'linear-gradient(90deg, #d946ef 0%, #ec4899 100%)',
+    Verbena: 'linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%)',
+};
+export const TopProgressBar = ({ preset = 'Gold', customPreset, }) => {
+    const [progress, setProgress] = useState(0);
+    const [visible, setVisible] = useState(false);
+    const incrementTimerRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const currentUrl = useMemo(() => {
+        const sp = searchParams?.toString();
+        return `${pathname ?? ''}${sp ? `?${sp}` : ''}`;
+    }, [pathname, searchParams]);
+    const clearTimers = useCallback(() => {
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, []);
+    const startProgress = useCallback(() => {
+        clearTimers();
+        setVisible(true);
+        setProgress(8);
+        incrementTimerRef.current = window.setInterval(() => {
+            setProgress((prev) => {
+                if (prev >= 90)
+                    return prev;
+                const delta = Math.max(1, Math.min(10, 10 * Math.random()));
+                return Math.min(prev + delta, 90);
+            });
+        }, 250);
+    }, [clearTimers]);
+    const finishProgress = useCallback(() => {
+        setProgress(100);
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            window.clearTimeout(hideTimerRef.current);
+        }
+        hideTimerRef.current = window.setTimeout(() => {
+            setVisible(false);
+            // Reset for next time after fade-out transition
+            hideTimerRef.current = window.setTimeout(() => setProgress(0), 200);
+        }, 150);
+    }, []);
+    // Trigger progress completion when URL changes
+    const previousUrl = useRef('');
+    useEffect(() => {
+        if (previousUrl.current !== currentUrl) {
+            previousUrl.current = currentUrl;
+            finishProgress();
+        }
+    }, [currentUrl, finishProgress]);
+    useEffect(() => {
+        const handleAnchorClick = (event) => {
+            const target = event.currentTarget;
+            if (!target)
+                return;
+            const href = target.getAttribute('href');
+            if (!href)
+                return;
+            const targetUrl = new URL(href, window.location.origin);
+            const current = new URL(window.location.href);
+            const isDifferent = targetUrl.origin !== current.origin ||
+                targetUrl.pathname !== current.pathname ||
+                targetUrl.search !== current.search;
+            if (isDifferent) {
+                startProgress();
+            }
+        };
+        const attachListeners = () => {
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => {
+                a.removeEventListener('click', handleAnchorClick);
+                a.addEventListener('click', handleAnchorClick);
+            });
+        };
+        const observer = new MutationObserver(() => attachListeners());
+        observer.observe(document, { childList: true, subtree: true });
+        attachListeners();
+        const originalPush = window.history.pushState;
+        const originalReplace = window.history.replaceState;
+        window.history.pushState = new Proxy(originalPush, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        window.history.replaceState = new Proxy(originalReplace, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        // Cleanup
+        return () => {
+            observer.disconnect();
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => a.removeEventListener('click', handleAnchorClick));
+            window.history.pushState = originalPush;
+            window.history.replaceState = originalReplace;
+            clearTimers();
+        };
+    }, [clearTimers, finishProgress, startProgress]);
+    return (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed top-0 right-0 left-0 z-[9999]", children: _jsx("div", { className: twMerge('h-[3px] transition-[width,opacity] duration-200 ease-out', visible ? 'opacity-100' : 'opacity-0'), style: {
+                width: `${progress}%`,
+                background: customPreset ?? PRESET_BG[preset],
+                boxShadow: '0 0 10px rgba(255, 255, 255, 0.6)',
+            } }) }));
+};

package/dist/components/TopProgress/index.d.ts

@@ -0,0 +1 @@
+export * from './TopProgressBar';

package/dist/components/TopProgress/index.js

@@ -0,0 +1 @@
+export * from './TopProgressBar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.460",
+	"version": "0.0.462",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",