@ludo.ninja/components 1.5.8 → 1.6.0

package/src/components/rewards/userExp/index.tsx

@@ -1,356 +0,0 @@
-import React from 'react';
-
-import Image from 'next/image';
-
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import BoxTransform from '@/styles/mixins/boxTransform';
-
-import { Flex } from '@system';
-
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-
-import ProgressBar from '../prograssBar';
-
-// Styles
-
-const StyledUserInfoExpTab = styled.div`
-  ${BoxTransform};
-  display: flex;
-  gap: 8px;
-  justify-content: space-between;
-  align-items: center;
-
-  min-width: 896px;
-  min-height: 160px;
-  max-width: max-content;
-  padding: 35px 32px;
-  margin-bottom: 70px;
-  border-radius: 16px;
-  background: ${({ theme }) => theme.colors.secondaryBg};
-
-  ${mediaQuery.maxWidthTablet} {
-    min-width: 704px;
-    min-height: 150px;
-    padding: 30px 32px;
-    margin-bottom: 80px;
-  }
-
-  ${mediaQuery.mobile} {
-    min-width: 320px;
-    min-height: 180px;
-    padding: 20px;
-    margin-bottom: 32px;
-    flex-direction: column;
-    position: relative;
-    gap: 0;
-  }
-
-  .info_wrapper {
-    display: flex;
-    gap: 24px;
-
-    ${mediaQuery.maxWidthTablet} {
-      min-width: 244px;
-    }
-
-    ${mediaQuery.mobile} {
-      min-width: 280px;
-      gap: 16px;
-      margin-bottom: 20px;
-    }
-
-    img.user_pic {
-      border-radius: 50%;
-
-      ${mediaQuery.mobile} {
-        max-width: 72px;
-        max-height: 72px;
-      }
-    }
-
-    .user_credential_wrapper {
-      justify-content: center;
-
-      ${mediaQuery.mobile} {
-        justify-content: flex-start;
-      }
-    }
-  }
-
-  .exp_wrapper {
-    min-height: 90px;
-    min-width: 406px;
-
-    ${mediaQuery.maxWidthTablet} {
-      min-width: 276px;
-    }
-
-    ${mediaQuery.mobile} {
-      min-height: 48px;
-    }
-  }
-
-  .user_name {
-    font-family: ${poppinsFontVarCss.css};
-
-    font-weight: 600;
-    font-size: 2.4em;
-    line-height: 1.5;
-    color: ${({ theme }) => theme.colors.naturalWhite};
-
-    ${mediaQuery.mobile} {
-      font-weight: 600;
-      font-size: 1.8em;
-      line-height: 1.33;
-      margin-bottom: 4px;
-    }
-  }
-
-  .user_wallet {
-    font-family: ${dmsansFontVarCss.css};
-
-    font-size: 1.5em;
-    line-height: 1.46;
-    color: ${({ theme }) => theme.colors.grayText};
-
-    ${mediaQuery.mobile} {
-      font-weight: 400;
-      font-size: 1.4em;
-      line-height: 1.28;
-    }
-  }
-
-  .user_exp {
-    margin-bottom: 10px;
-    gap: 8px;
-    align-items: center;
-
-    &.mobile {
-      display: none;
-    }
-
-    ${mediaQuery.mobile} {
-      gap: 6px;
-
-      &.mobile {
-        display: flex;
-        margin-top: 4px;
-        margin-bottom: 0;
-      }
-
-      &.desktop {
-        display: none;
-      }
-    }
-
-    .exp_logo {
-      ${mediaQuery.mobile} {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-
-  .exp_value {
-    font-family: ${poppinsFontVarCss.css};
-
-    font-weight: 600;
-    font-size: 2em;
-    line-height: 1.4;
-    color: ${({ theme }) => theme.colors.naturalWhite};
-
-    ${mediaQuery.mobile} {
-      font-size: 1.5em;
-      line-height: 1.37;
-    }
-  }
-
-  .exp_current_lvl {
-    font-weight: 600;
-    font-size: 1.8em;
-    line-height: 1.44;
-    color: ${({ theme }) => theme.colors.buttonInactive};
-
-    ${mediaQuery.mobile} {
-      font-size: 1.6em;
-      line-height: 1.37;
-    }
-  }
-
-  .exp_left_untill {
-    font-weight: 400;
-    font-size: 1.5em;
-    line-height: 1.46;
-    color: ${({ theme }) => theme.colors.grayText};
-
-    ${mediaQuery.mobile} {
-      font-size: 1.4em;
-      line-height: 1.28;
-    }
-  }
-
-  .exp_next_lvl {
-    font-weight: 500;
-    font-size: 1em;
-    line-height: 1.46;
-    color: ${({ theme }) => theme.colors.buttonInactive};
-
-    margin-left: 5px;
-
-    ${mediaQuery.mobile} {
-      font-size: 1.15em;
-      line-height: 1.37;
-    }
-  }
-
-  .user_lvl_block {
-    margin-top: 10px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    gap: ${adaptiveValueCalc(8)};
-    min-width: ${adaptiveValueCalc(896)};
-    min-height: ${adaptiveValueCalc(160)};
-    padding: ${adaptiveValueCalc(35)} ${adaptiveValueCalc(32)};
-    margin-bottom: ${adaptiveValueCalc(70)};
-    border-radius: ${adaptiveValueCalc(16)};
-
-    .info_wrapper {
-      gap: ${adaptiveValueCalc(24)};
-
-      img.user_pic {
-        width: ${adaptiveValueCalc(96)};
-        height: ${adaptiveValueCalc(96)};
-      }
-    }
-
-    .exp_wrapper {
-      min-height: ${adaptiveValueCalc(90)};
-      min-width: ${adaptiveValueCalc(406)};
-    }
-
-    .user_name {
-      font-size: ${adaptiveValueCalc(24)};
-    }
-
-    .user_wallet {
-      font-size: ${adaptiveValueCalc(15)};
-    }
-
-    .user_exp {
-      gap: ${adaptiveValueCalc(8)};
-      margin-bottom: ${adaptiveValueCalc(10)};
-
-      .exp_logo {
-        width: ${adaptiveValueCalc(28)};
-        height: ${adaptiveValueCalc(28)};
-      }
-    }
-
-    .exp_value {
-      font-size: ${adaptiveValueCalc(20)};
-    }
-
-    .exp_current_lvl {
-      font-size: ${adaptiveValueCalc(18)};
-    }
-
-    .exp_left_untill {
-      font-size: ${adaptiveValueCalc(15)};
-    }
-
-    .exp_next_lvl {
-      margin-left: ${adaptiveValueCalc(5)};
-    }
-
-    .user_lvl_block {
-      margin-top: ${adaptiveValueCalc(10)};
-    }
-  }
-`;
-// Types
-
-type ExpUserProps = {
-  userPic: string | null;
-  userName: string | null;
-  userWallet: string | null;
-  userExpPercent: number;
-  userExp: number;
-  userLevel: string | number;
-  totalExpInLevel: number | null;
-};
-
-// Component
-
-const UserInfoExpTab = ({
-  userPic,
-  userName,
-  userWallet,
-  userExpPercent,
-  userExp,
-  userLevel,
-  totalExpInLevel,
-}: ExpUserProps) => {
-  const expContent = (
-    <>
-      <Image
-        src={'/rewardsPage/XP_logo.svg'}
-        alt="Experience logo"
-        width={28}
-        height={28}
-        className="exp_logo"
-      />
-      <p className={`exp_value`}>{userExp} XP</p>
-    </>
-  );
-
-  return (
-    <StyledUserInfoExpTab>
-      <Flex className="info_wrapper">
-        <Image
-          src={`${userPic ?? '/rewardsPage/defaultUserPic.svg'}`}
-          width={96}
-          height={96}
-          alt="User profile picture"
-          className="user_pic"
-        />
-        <Flex flexDirection="column" className={'user_credential_wrapper'}>
-          <p className={`user_name`}>{userName ?? 'User Name'}</p>
-          <span className={`user_wallet`}>
-            {userWallet ?? '0xcd292...3268'}
-          </span>
-          <Flex className={'user_exp mobile'}>{expContent}</Flex>
-        </Flex>
-      </Flex>
-      <Flex
-        flexDirection="column"
-        className={'exp_wrapper'}
-        justifyContent={'center'}
-      >
-        <Flex className={'user_exp desktop'}>{expContent}</Flex>
-        <ProgressBar percent={userExpPercent} height={16} isUserTab={true} />
-        <Flex
-          justifyContent="space-between"
-          className={'user_lvl_block'}
-          alignItems="center"
-        >
-          <p className={`exp_current_lvl`}>Level {userLevel ?? '4'}</p>
-          <p className={`exp_left_untill`}>
-            {(totalExpInLevel && totalExpInLevel) ?? '4,067'} XP to{' '}
-            <span className={`exp_next_lvl`}>
-              Level {Number(userLevel) + 1 ?? '5'}
-            </span>
-          </p>
-        </Flex>
-      </Flex>
-    </StyledUserInfoExpTab>
-  );
-};
-
-// Export
-
-export default UserInfoExpTab;

package/src/components/search/SearchInputContainer.tsx

@@ -1,298 +0,0 @@
-import React, {
-  KeyboardEvent,
-  MutableRefObject,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import { useRouter } from 'next/router';
-
-import _debounce from 'lodash.debounce';
-import styled, { keyframes } from 'styled-components';
-
-import { WhiteColor } from '@ludo.ninja/ui/build/styles/colors';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { rootAddOverflow, rootRemoveOverflow } from '@ludo.ninja/utils';
-
-import { useUiStore } from '@/store/ui';
-
-import { useFetchFindAllTopEntitiesByName } from '@/api/server-search/queries/useFetchFindAllTopEntitiesByName';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import SearchCloseMoreButtons from '@/components/search/searchCloseMoreButtons';
-import SearchSuggestions from '@/components/search/searchSuggestions';
-
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import BackIcon from '@/public/search/back.svg';
-
-interface IUseSearch {
-  onFocusHandler?: (arg: boolean) => void;
-  isClearOnBlur?: boolean;
-  initializeInputComponent: ({
-    searchSuggestion,
-    handle,
-    inputRef,
-    searchValue,
-    isSearchFocused,
-    mobileOrDesktopPlaceHolder,
-    isMobileOpen,
-    searchCloseButton,
-  }: {
-    searchSuggestion: ReactNode | false;
-    handle: {
-      focus: (e: React.FocusEvent<HTMLInputElement>) => void;
-      change: (e: { target: { value: string } }) => void;
-      blur: () => void;
-      keyPress: (e: KeyboardEvent<HTMLInputElement>) => void;
-    };
-    inputRef: MutableRefObject<HTMLInputElement | null>;
-    searchValue: string;
-    mobileOrDesktopPlaceHolder: string;
-    isSearchFocused: boolean;
-    isMobileOpen: boolean;
-    searchCloseButton: ReactNode;
-  }) => ReactNode;
-}
-
-const enterKey = 'Enter';
-
-export const SearchInputContainer = ({
-  onFocusHandler,
-  isClearOnBlur,
-  initializeInputComponent,
-}: IUseSearch) => {
-  const inputSearch = useRef<HTMLInputElement | null>(null);
-  const [searchValue, setSearchValue] = useState<string>('');
-  //fix cache apollo with debounce
-  const [debouncedValue, setDebouncedValue] = useState<string>('');
-  const [isDebounceLoading, setIsDebounceLoading] = useState<boolean>(false);
-
-  const [isSearchFocused, setSearchFocused] = useState<boolean>(false);
-
-  const { openOverLay, closeOverlay } = useUiStore((state) => ({
-    openOverLay: state.openOverLay,
-    closeOverlay: state.closeOverlay,
-  }));
-  const { isMobile } = useWindowDimensionsWithServerInitial();
-
-  const { load, topEntities, loading, clearTopEntitiesState } =
-    useFetchFindAllTopEntitiesByName();
-
-  const router = useRouter();
-  useEffect(() => {
-    const term = router.query?.term;
-    if (term) {
-      setSearchValue(term as string);
-    }
-  }, []);
-
-  const updateDebouncedValue = useCallback(
-    _debounce(setDebouncedValue, 200),
-    []
-  );
-  useEffect(() => {
-    if (searchValue.length) {
-      setIsDebounceLoading(true);
-    }
-    updateDebouncedValue(searchValue);
-  }, [searchValue]);
-
-  useEffect(() => {
-    if (debouncedValue.length) {
-      load({ name: debouncedValue, pageSize: 4 }).then(() => {
-        setIsDebounceLoading(false);
-      });
-    }
-  }, [debouncedValue]);
-
-  const [isMobileOpen, setIsMobileOpen] = useState(false);
-
-  const Container = isMobileOpen ? SMobileContainer : React.Fragment;
-  const SearchContainer = isMobileOpen
-    ? SMobileSearchContainer
-    : React.Fragment;
-
-  const searchSuggestion = (
-    <SearchSuggestions
-      isLoading={loading || isDebounceLoading}
-      searchTerm={debouncedValue}
-      assets={topEntities?.assets || []}
-      profiles={topEntities?.profiles || []}
-      collections={topEntities?.collections || []}
-    />
-  );
-
-  return (
-    <Container>
-      <SearchContainer>
-        {isMobileOpen && (
-          <BackIcon
-            onClick={() => {
-              setIsMobileOpen(false);
-              rootRemoveOverflow();
-              if (isClearOnBlur) {
-                setSearchValue('');
-                clearTopEntitiesState();
-              }
-            }}
-          />
-        )}
-        {initializeInputComponent({
-          isMobileOpen,
-          mobileOrDesktopPlaceHolder: isMobile
-            ? 'Search'
-            : 'Search for NFTs, collections, profiles, ENS and blockchain addresses',
-
-          isSearchFocused,
-          searchValue,
-          inputRef: inputSearch,
-          handle: {
-            focus() {
-              if (isMobileOpen) {
-                return;
-              }
-              if (isMobile) {
-                setIsMobileOpen(true);
-                rootAddOverflow();
-                return;
-              }
-              openOverLay();
-              setSearchFocused(true);
-              onFocusHandler?.(true);
-            },
-            change(e: { target: { value: string } }) {
-              setSearchValue(e.target.value);
-            },
-            blur() {
-              if (isMobileOpen) {
-                return;
-              }
-              if (isMobile) {
-                rootRemoveOverflow();
-                return;
-              }
-              setTimeout(() => {
-                inputSearch.current?.blur();
-                setSearchFocused(false);
-                onFocusHandler?.(false);
-                closeOverlay();
-                if (isClearOnBlur) {
-                  setSearchValue('');
-                  clearTopEntitiesState();
-                }
-              }, 100);
-            },
-            async keyPress(e: KeyboardEvent<HTMLInputElement>) {
-              if (e.key === enterKey) {
-                const { value } = e.target as HTMLInputElement;
-                const newSearchValue = value.length ? searchValue : '';
-
-                if (
-                  router.pathname.includes('/search/nfts') ||
-                  router.pathname.includes('/search/collections') ||
-                  router.pathname.includes('/search/profiles')
-                ) {
-                  await router.replace(
-                    {
-                      query: { ...router.query, term: newSearchValue },
-                    },
-                    undefined,
-                    { shallow: true }
-                  );
-
-                  setSearchFocused(false);
-                  onFocusHandler?.(false);
-                  closeOverlay();
-                } else {
-                  await router.push({
-                    pathname: '/search/nfts',
-                    query: { term: newSearchValue },
-                  });
-
-                  // setSearchFocused(false);
-                  // onFocusHandler?.(false);
-                  closeOverlay();
-                }
-              }
-            },
-          },
-          searchSuggestion: !isMobile && searchValue && (
-            <div className="suggestionBar">{searchSuggestion}</div>
-          ),
-          searchCloseButton: (
-            <SearchCloseMoreButtons
-              isNeedToShow={Boolean(searchValue.length)}
-              position={{
-                top: '50%',
-                right: '0',
-                transform: 'translate(-50%, -50%)',
-              }}
-              clearSearchValue={setSearchValue}
-            />
-          ),
-        })}
-      </SearchContainer>
-      {isMobileOpen && searchValue && (
-        <SSuggestions>{searchSuggestion}</SSuggestions>
-      )}
-    </Container>
-  );
-};
-
-const show = keyframes`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-
-const SMobileContainer = styled.div`
-  position: fixed;
-  z-index: 100000;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: var(--app-height);
-  background-color: ${WhiteColor};
-  padding: 17px 20px 0;
-  animation: ${show} 300ms forwards;
-  ${mediaQuery.minWidthFourK} {
-    padding: ${adaptiveValueCalc(17)} ${adaptiveValueCalc(20)} 0;
-  }
-`;
-const SMobileSearchContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  ${mediaQuery.minWidthFourK} {
-    gap: ${adaptiveValueCalc(2)};
-  }
-`;
-
-const SSuggestions = styled.div`
-  display: flex;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: calc(100% - 36px - 17px);
-  margin-left: -5px;
-  margin-right: -5px;
-  padding-left: 5px;
-  padding-right: 5px;
-  width: calc(100% + 10px);
-
-  ${mediaQuery.minWidthFourK} {
-    height: calc(100% - ${adaptiveValueCalc(36)} - ${adaptiveValueCalc(17)});
-    margin-left: ${adaptiveValueCalc(-5)};
-    margin-right: ${adaptiveValueCalc(-5)};
-    padding-left: ${adaptiveValueCalc(5)};
-    padding-right: ${adaptiveValueCalc(5)};
-    width: calc(100% + ${adaptiveValueCalc(10)});
-  }
-`;