@opexa/portal-components 0.1.33 → 0.1.34

package/dist/components/GamesSearch/GamesSearch.js

@@ -5,6 +5,7 @@ import { isString } from 'lodash-es';
 import Image from 'next/image';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useDebounceValue } from 'usehooks-ts';
 import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
@@ -14,16 +15,19 @@ import { Combobox } from '../../ui/Combobox/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { Presence } from '../../ui/Presence/index.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
-import { sanitizeGamesSearch } from '../../utils/sanitizeGamesSearch.js';
+import { collapseGamesSearch, mergeUniqueById, normalizeGameName, sanitizeGamesSearch, } from '../../utils/sanitizeGamesSearch.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function GamesSearch(props) {
     const isBypass = useBypassKycChecker(props.bypassDomains);
     const [searchInput, setSearchInput] = useState('');
-    const sanitizedSearch = sanitizeGamesSearch(searchInput);
+    const [debouncedSearch] = useDebounceValue(searchInput, 300);
+    const sanitizedSearch = sanitizeGamesSearch(debouncedSearch);
+    const collapsedSearch = collapseGamesSearch(debouncedSearch);
+    const hasSpaces = collapsedSearch !== sanitizedSearch;
     const trimmedInputLength = searchInput.trim().length;
     const showMinLengthWarning = trimmedInputLength > 0 &&
         trimmedInputLength < 3 &&
-        sanitizedSearch.length < 3;
+        sanitizeGamesSearch(searchInput).length < 3;
     const gamesQuery = useGamesQuery({
         first: props.first ?? 18,
         filter: props.filter,
@@ -32,9 +36,27 @@ export function GamesSearch(props) {
     }, {
         enabled: sanitizedSearch.length >= 3,
     });
-    let games = gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
+    const collapsedGamesQuery = useGamesQuery({
+        first: props.first ?? 18,
+        filter: props.filter,
+        search: collapsedSearch,
+        sort: props.sort,
+    }, {
+        enabled: hasSpaces && collapsedSearch.length >= 3,
+    });
+    let games = mergeUniqueById(gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [], collapsedGamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? []);
     if (props.variant === '88play') {
-        games = games.filter((game) => game.name.toLowerCase().includes(sanitizedSearch.toLowerCase()));
+        const normalizedSearch = normalizeGameName(sanitizedSearch);
+        games = games.filter((game) => normalizeGameName(game.name).includes(normalizedSearch));
+    }
+    const hasNextPage = gamesQuery.hasNextPage || collapsedGamesQuery.hasNextPage;
+    function fetchNextPage() {
+        if (gamesQuery.hasNextPage) {
+            void gamesQuery.fetchNextPage();
+        }
+        else if (collapsedGamesQuery.hasNextPage) {
+            void collapsedGamesQuery.fetchNextPage();
+        }
     }
     const collection = createListCollection({
         items: games,
@@ -52,14 +74,14 @@ export function GamesSearch(props) {
                 placement: 'bottom',
             }, inputValue: searchInput, onInputValueChange: (details) => {
                 setSearchInput(details.inputValue);
-            }, selectionBehavior: "preserve", allowCustomValue: true, children: [_jsxs(Combobox.Control, { className: "relative z-50", children: [_jsx(Combobox.Input, { placeholder: props.placeholder ?? 'Search' }), _jsx(Combobox.Context, { children: (api) => {
+            }, selectionBehavior: "preserve", allowCustomValue: true, children: [_jsxs(Combobox.Control, { className: "relative ui-open:z-popover", children: [_jsx(Combobox.Input, { placeholder: props.placeholder ?? 'Search' }), _jsx(Combobox.Context, { children: (api) => {
                                 if (api.inputValue.length <= 0)
                                     return null;
                                 return (_jsx("span", { className: "cursor-pointer px-3.5 font-semibold text-text-secondary-700", onClick: () => {
                                         api.setInputValue('');
                                         api.focus();
                                     }, children: "Clear" }));
-                            } })] }), _jsx(Portal, { children: _jsx(Combobox.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsx(Presence, { present: api.open, children: _jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm", onClick: () => api.setOpen(false) }) }), _jsx(Combobox.Positioner, { children: searchInput.trim().length > 0 && (_jsx(Combobox.Content, { className: "z-50 max-h-[33.25rem] overflow-y-auto p-0", children: showMinLengthWarning ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && (_jsx(Alert, { message: "No results found" })), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: twMerge('grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, onClick: () => {
+                            } })] }), _jsx(Portal, { children: _jsx(Combobox.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsx(Presence, { present: api.open, children: _jsx("div", { className: "fixed inset-0 z-backdrop bg-black/50 backdrop-blur-sm", onClick: () => api.setOpen(false) }) }), _jsx(Combobox.Positioner, { className: "!z-popover", children: searchInput.trim().length > 0 && (_jsx(Combobox.Content, { className: "max-h-[33.25rem] overflow-y-auto p-0", children: showMinLengthWarning ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && (_jsx(Alert, { message: "No results found" })), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: twMerge('grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, onClick: () => {
                                                                         api.setOpen(false);
                                                                     }, className: twMerge('md:hover:-translate-y-1 relative flex h-full w-full flex-col shadow-sm transition-transform duration-200', classNames.thumbnailRoot), children: [_jsx(Image, { src: game.name === 'Rainbow Ball'
                                                                                 ? RainbowballImg
@@ -67,7 +89,7 @@ export function GamesSearch(props) {
                                                                                     reference: game.reference,
                                                                                     provider: game.provider,
                                                                                     image: game.image,
-                                                                                }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('flex w-full flex-1 items-center justify-center break-words rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.thumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-4xl w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })) })] })) }) })] }) }));
+                                                                                }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('flex w-full flex-1 items-center justify-center break-words rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.thumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })) }), _jsx(Presence, { present: hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-4xl w-fit', classNames.loadMoreButton), onClick: fetchNextPage, children: "Load More" }) })] }))] })) })) })] })) }) })] }) }));
 }
 function Alert({ message }) {
     return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-lg border border-border-primary bg-bg-secondary shadow-xs", children: _jsx(SearchLgIcon, { className: "size-6 text-text-secondary-700" }) }), _jsx("p", { className: "mt-4 text-center text-text-secondary-700", children: message })] }));

package/dist/components/Search/Search.lazy.js

@@ -23,12 +23,11 @@ import { Portal } from '../../ui/Portal/index.js';
 import { Presence } from '../../ui/Presence/index.js';
 import { callIfFn } from '../../utils/callIfFn.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
+import { collapseGamesSearch, mergeUniqueById, normalizeGameName, sanitizeGamesSearch, } from '../../utils/sanitizeGamesSearch.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 function lookup(value, compare) {
-    return value
-        .toLowerCase()
-        .replace(/\s+/g, '')
-        .includes(compare.toLowerCase().replace(/\s+/g, ''));
+    const normalizedCompare = normalizeGameName(compare);
+    return normalizeGameName(value).includes(normalizedCompare);
 }
 export function Search(props) {
     const isBypass = useBypassKycChecker(props.bypassDomains);
@@ -37,6 +36,9 @@ export function Search(props) {
     })));
     const inputRef = useRef(null);
     const [search, setSearch] = useState('');
+    const sanitizedSearch = sanitizeGamesSearch(search);
+    const collapsedSearch = collapseGamesSearch(search);
+    const hasSpaces = collapsedSearch !== sanitizedSearch;
     const gameProviders = props.gameProviders
         .map((provider) => GAME_PROVIDER_DATA[provider])
         .filter((provider) => {
@@ -58,9 +60,36 @@ export function Search(props) {
     }, {
         enabled: search.length >= 2,
     });
-    let games = gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
+    const collapsedGamesQuery = useGamesQuery({
+        first: 18,
+        search: collapsedSearch,
+        filter: {
+            type: {
+                in: props.gameTypes,
+            },
+            provider: {
+                in: props.gameProviders,
+            },
+        },
+    }, {
+        enabled: search.length >= 2 &&
+            hasSpaces &&
+            gameProviders.length === 0 &&
+            collapsedSearch.length >= 2,
+    });
+    let games = mergeUniqueById(gamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [], collapsedGamesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? []);
     if (props.variant === '88play') {
-        games = games.filter((game) => game.name.toLowerCase().includes(search.toLowerCase()));
+        const normalizedSearch = normalizeGameName(search);
+        games = games.filter((game) => normalizeGameName(game.name).includes(normalizedSearch));
+    }
+    const hasNextPage = gamesQuery.hasNextPage || collapsedGamesQuery.hasNextPage;
+    function fetchNextPage() {
+        if (gamesQuery.hasNextPage) {
+            void gamesQuery.fetchNextPage();
+        }
+        else if (collapsedGamesQuery.hasNextPage) {
+            void collapsedGamesQuery.fetchNextPage();
+        }
     }
     const empty = games.length <= 0 && gameProviders.length <= 0;
     const viewGamesUrl = (data) => {
@@ -93,7 +122,7 @@ export function Search(props) {
                                                                                     reference: game.reference,
                                                                                     provider: game.provider,
                                                                                     image: game.image,
-                                                                                }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', props.variant !== '88play' && 'truncate', classNames.gameThumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })] })), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-12 w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) }) })] }) })] }) }));
+                                                                                }), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', props.variant !== '88play' && 'truncate', classNames.gameThumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })] })), _jsx(Presence, { present: hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-12 w-fit', classNames.loadMoreButton), onClick: fetchNextPage, children: "Load More" }) })] }))] })) }) })] }) })] }) }));
 }
 function DebouncedInput(props) {
     const [value, setValue] = useControllableState({

package/dist/utils/sanitizeGamesSearch.d.ts

@@ -1 +1,6 @@
 export declare function sanitizeGamesSearch(search?: string): string;
+export declare function collapseGamesSearch(search?: string): string;
+export declare function normalizeGameName(value: string): string;
+export declare function mergeUniqueById<T extends {
+    id: string;
+}>(...lists: T[][]): T[];

package/dist/utils/sanitizeGamesSearch.js

@@ -7,3 +7,23 @@ export function sanitizeGamesSearch(search) {
     const normalized = cleaned.trim().replace(/\s+/g, ' ');
     return normalized.length > 0 ? normalized : '';
 }
+export function collapseGamesSearch(search) {
+    return sanitizeGamesSearch(search).replace(/\s+/g, '');
+}
+export function normalizeGameName(value) {
+    return value.toLowerCase().replace(/[^a-z0-9]/g, '');
+}
+export function mergeUniqueById(...lists) {
+    const seen = new Set();
+    const result = [];
+    for (const list of lists) {
+        for (const item of list) {
+            if (seen.has(item.id)) {
+                continue;
+            }
+            seen.add(item.id);
+            result.push(item);
+        }
+    }
+    return result;
+}

package/package.json

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