@ludo.ninja/components 1.5.8 → 1.5.9

package/src/components/search/index.tsx

@@ -1,271 +0,0 @@
-import React from 'react';
-
-import styled, { css } from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  AccentColor,
-  BlackColor,
-  BorderColorLight,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
-import { zIndexSearch } from '@/styles/mixins/z-indexes';
-import { FH6, FH7 } from '@/styles/typography';
-
-import { SearchInputContainer } from '@/components/search/SearchInputContainer';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import { dmsansFontVarCss } from '@/fonts/vars';
-
-import SearchGlassIcon from '@/public/search/search.svg';
-
-// Styles
-const StyledSearch = styled.div<{
-  isActive: boolean;
-  isFocused: boolean;
-  isMobileOpen: boolean;
-}>`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  max-width: 600px;
-  margin: 0px 20px 50px;
-  position: relative;
-  z-index: ${(props) => (props.isFocused ? zIndexSearch.toString() : '0')};
-  box-shadow: ${(props) =>
-    props.isActive ? 'none' : '0 16px 32px -16px rgba(33, 21, 95, 0.12)'};
-  background-color: white;
-  width: 600px;
-  height: 60px;
-  border-top-right-radius: 30px;
-  border-top-left-radius: 30px;
-  border-bottom-right-radius: ${(props) => (props.isActive ? 'none' : '30px')};
-  border-bottom-left-radius: ${(props) => (props.isActive ? 'none' : '30px')};
-
-  @media (max-width: 767px) {
-    margin: 0 20px 20px 20px;
-    height: 52px;
-    box-shadow: 0 16px 32px -16px rgba(33, 21, 95, 0.12);
-    border-bottom-right-radius: 30px;
-    border-bottom-left-radius: 30px;
-    ${(props) =>
-      props.isMobileOpen &&
-      css`
-        height: unset;
-        width: 100%;
-        margin: 0;
-      `}
-  }
-
-  .suggestionBar {
-    position: absolute;
-    top: 50px;
-    left: 0;
-    right: 0;
-    padding: 0 10px 10px;
-    background-color: ${WhiteColor};
-    border-bottom-right-radius: 30px;
-    border-bottom-left-radius: 30px;
-    @media (min-width: 768px) {
-      .scroller {
-        max-height: calc(
-          var(--app-height) - 124px - 50px - 24px - 10px - 24px - 44px
-        );
-      }
-    }
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    //margin: ${adaptiveValueCalc(30)} 0 0 0;
-    max-width: ${adaptiveValueCalc(600)};
-    margin: 0 ${adaptiveValueCalc(20)} ${adaptiveValueCalc(50)};
-    box-shadow: ${(props) =>
-      props.isActive
-        ? 'none'
-        : `0 ${adaptiveValueCalc(16)} ${adaptiveValueCalc(
-            32
-          )} ${adaptiveValueCalc(-16)} rgba(33, 21, 95, 0.12)`};
-    width: ${adaptiveValueCalc(600)};
-    height: ${adaptiveValueCalc(60)};
-    border-top-right-radius: ${adaptiveValueCalc(30)};
-    border-top-left-radius: ${adaptiveValueCalc(30)};
-    border-bottom-right-radius: ${(props) =>
-      props.isActive ? 'none' : adaptiveValueCalc(30)};
-    border-bottom-left-radius: ${(props) =>
-      props.isActive ? 'none' : adaptiveValueCalc(30)};
-
-    .suggestionBar {
-      top: ${adaptiveValueCalc(50)};
-      padding: 0 ${adaptiveValueCalc(10)} ${adaptiveValueCalc(10)};
-      border-bottom-right-radius: ${adaptiveValueCalc(30)};
-      border-bottom-left-radius: ${adaptiveValueCalc(30)};
-
-      .scroller {
-        max-height: calc(
-          var(--app-height) - ${adaptiveValueCalc(124)} -
-            ${adaptiveValueCalc(50)} - ${adaptiveValueCalc(24)} -
-            ${adaptiveValueCalc(10)} - ${adaptiveValueCalc(24)} -
-            ${adaptiveValueCalc(44)}
-        );
-      }
-    }
-  }
-`;
-
-const StyledInput = styled.input<{ isActive: boolean; isMobileOpen: boolean }>`
-  font-family: ${dmsansFontVarCss.css};
-  ${FH7};
-  margin: 10px;
-  position: relative;
-  width: 96%;
-  height: 40px;
-  outline: none;
-  border: none;
-  color: ${BlackColor};
-  background-color: #f9fafc;
-  padding-left: 52px;
-  padding-right: 48px;
-  box-sizing: border-box;
-  margin-top: ${(props) => (props.isActive ? '0' : '10px')};
-  margin-bottom: ${(props) => (props.isActive ? '0' : '10px')};
-  border-top-right-radius: 20px;
-  border-top-left-radius: 20px;
-  border-bottom-right-radius: ${(props) => (props.isActive ? 'none' : '30px')};
-  border-bottom-left-radius: ${(props) => (props.isActive ? 'none' : '30px')};
-
-  ::placeholder {
-    color: ${TextGrayColor};
-  }
-
-  @media (max-width: 767px) {
-    ${FH6};
-    padding-left: 40px;
-
-    height: 36px;
-    margin: 8px;
-    width: 96%;
-    border-bottom-right-radius: 30px;
-    border-bottom-left-radius: 30px;
-    ${(props) =>
-      props.isMobileOpen &&
-      css`
-        border-top-right-radius: 30px;
-        border-top-left-radius: 30px;
-        width: 100%;
-        margin: 0;
-      `}
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin: ${adaptiveValueCalc(10)};
-    height: ${adaptiveValueCalc(40)};
-    padding-left: ${adaptiveValueCalc(52)};
-    padding-right: ${adaptiveValueCalc(48)};
-    margin-top: ${(props) => (props.isActive ? '0' : adaptiveValueCalc(10))};
-    margin-bottom: ${(props) => (props.isActive ? '0' : adaptiveValueCalc(10))};
-    border-top-right-radius: ${adaptiveValueCalc(20)};
-    border-top-left-radius: ${adaptiveValueCalc(20)};
-    border-bottom-right-radius: ${(props) =>
-      props.isActive ? 'none' : adaptiveValueCalc(30)};
-    border-bottom-left-radius: ${(props) =>
-      props.isActive ? 'none' : adaptiveValueCalc(30)};
-  }
-`;
-
-const StyledSearchIcon = styled.div<{ isActive: boolean }>`
-  position: absolute;
-  top: 18px;
-  bottom: 18px;
-  left: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 1;
-
-  width: 24px;
-  height: 24px;
-
-  svg path {
-    stroke: ${(props) => (props.isActive ? BorderColorLight : AccentColor)};
-  }
-
-  @media (max-width: 767px) {
-    left: 16px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    top: ${adaptiveValueCalc(18)};
-    bottom: ${adaptiveValueCalc(18)};
-    left: ${adaptiveValueCalc(30)};
-
-    width: ${adaptiveValueCalc(24)};
-    height: ${adaptiveValueCalc(24)};
-  }
-`;
-
-const SearchGlassIconResize = () => {
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  return (
-    <SearchGlassIcon
-      style={getAdaptiveScale({
-        windowDimensions,
-        currentSize: 1,
-      })}
-    />
-  );
-};
-
-// Components
-const Search = () => (
-  <SearchInputContainer
-    isClearOnBlur
-    initializeInputComponent={({
-      searchSuggestion,
-      handle,
-      inputRef,
-      searchValue,
-      isSearchFocused,
-      mobileOrDesktopPlaceHolder,
-      searchCloseButton,
-      isMobileOpen,
-    }) => (
-      <StyledSearch
-        isActive={Boolean(searchValue.length)}
-        isFocused={isSearchFocused}
-        isMobileOpen={isMobileOpen}
-      >
-        <StyledSearchIcon isActive={Boolean(searchValue.length)}>
-          <SearchGlassIconResize />
-        </StyledSearchIcon>
-        <StyledInput
-          isMobileOpen={isMobileOpen}
-          isActive={Boolean(searchValue.length)}
-          tabIndex={0}
-          autoComplete={'off'}
-          onChange={handle.change}
-          ref={inputRef}
-          onFocus={handle.focus}
-          onBlur={handle.blur}
-          onKeyPress={handle.keyPress}
-          value={searchValue}
-          type={'text'}
-          placeholder={mobileOrDesktopPlaceHolder}
-        />
-        {searchCloseButton}
-        {searchSuggestion}
-      </StyledSearch>
-    )}
-  />
-);
-
-// Export
-
-export default Search;

package/src/components/search/searchCategories/index.tsx

@@ -1,169 +0,0 @@
-import React, { useState } from 'react';
-
-import styled from 'styled-components';
-
-import { TextGrayColor } from '@/styles/colors';
-import { FH3 } from '@/styles/typography';
-
-import { categoryType } from './type';
-
-const StyledSearchCategories = styled.div`
-  position: absolute;
-  cursor: pointer;
-  height: 100%;
-  width: 24.58%;
-  z-index: 1000;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-
-  :before {
-    content: '';
-    width: 1px;
-    height: 24px;
-    background-color: #c1c8de;
-    margin-right: 16px;
-  }
-
-  .caption {
-    ${FH3};
-    user-select: none;
-    color: #696f91;
-  }
-  .dropdown {
-    display: none;
-    position: absolute;
-    top: 60px;
-    background-color: white;
-    width: 220px;
-    height: auto;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-    border-radius: 24px;
-
-    :before {
-      content: '';
-      height: 20px;
-      display: block;
-      width: 100%;
-      background-color: transparent;
-      top: -20px;
-      position: absolute;
-    }
-
-    span {
-      display: block;
-      color: ${TextGrayColor};
-      font-size: 16px;
-      height: 100%;
-      padding: 13px 0 13px 20px;
-      user-select: none;
-
-      :last-child {
-        border-bottom-right-radius: 24px;
-        border-bottom-left-radius: 24px;
-      }
-
-      :first-child {
-        border-top-right-radius: 24px;
-        border-top-left-radius: 24px;
-      }
-
-      :hover {
-        background-color: #f6f7fd;
-      }
-    }
-  }
-
-  .arrow_icon {
-    width: 24px;
-    height: 24px;
-    margin-left: 16px;
-
-    .icon {
-      content: url('/search/arrow_up.svg');
-      transform: rotate(0deg);
-      transition: transform 0.2s;
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  :hover {
-    .dropdown {
-      display: block;
-    }
-    .arrow_icon .icon {
-      transform: rotate(180deg);
-      transition: transform 0.2s;
-    }
-  }
-
-  :hover :before {
-    .arrow_icon .icon {
-      transform: rotate(180deg);
-      transition: transform 0.2s;
-    }
-    .dropdown {
-      display: block;
-    }
-  }
-`;
-
-const data: categoryType[] = [
-  {
-    id: Math.random(),
-    label: 'Creations',
-  },
-  {
-    id: Math.random(),
-    label: 'Users',
-  },
-  {
-    id: Math.random(),
-    label: 'Galleries',
-  },
-  {
-    id: Math.random(),
-    label: 'Campaigns',
-  },
-];
-
-// Components
-const SearchCategories = () => {
-  const [categoryValue, setCategoryValue] = useState<categoryType>(data[0]);
-
-  // Handlers
-  const handleCategory = (
-    e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
-    indx: number
-  ) => {
-    setCategoryValue(data[indx]);
-  };
-
-  // Renders
-  const renderCategories = () =>
-    data.map((category, indx: number) => {
-      if (category.id !== categoryValue.id) {
-        return (
-          <span key={category.id} onClick={(e) => handleCategory(e, indx)}>
-            {category.label}
-          </span>
-        );
-      }
-    });
-
-  return (
-    <StyledSearchCategories>
-      <span className={'caption'}>{categoryValue.label}</span>
-      <div className={'arrow_icon'}>
-        <span className={'icon'} />
-      </div>
-      <div className={'dropdown'}>{renderCategories()}</div>
-    </StyledSearchCategories>
-  );
-};
-
-// Export
-export default SearchCategories;

package/src/components/search/searchCategories/type.ts

@@ -1,6 +0,0 @@
-type categoryType = {
-  id: number;
-  label: string;
-};
-
-export type { categoryType };

package/src/components/search/searchCloseMoreButtons/index.tsx

@@ -1,101 +0,0 @@
-import React from 'react';
-
-import { useRouter } from 'next/router';
-
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import SearchCloseIcon from '@/public/search/close.svg';
-
-// Styles
-
-interface PositionProps {
-  top?: string;
-  left?: string;
-  right?: string;
-  bottom?: string;
-  transform?: string;
-}
-
-const StyledSearchCloseMoreButtons = styled.div<{
-  position: PositionProps;
-}>`
-  position: absolute;
-  right: ${(props) => props.position.right};
-  top: ${(props) => props.position.top};
-  bottom: ${(props) => props.position.bottom};
-  left: ${(props) => props.position.left};
-  transform: ${(props) => props.position.transform};
-  display: flex;
-  height: 40px;
-  ${mediaQuery.minWidthFourK} {
-    height: ${adaptiveValueCalc(40)};
-  }
-`;
-
-const StyledCloseIcon = styled.div`
-  cursor: pointer;
-  z-index: 1;
-  padding: 8px 6px;
-
-  ${mediaQuery.minWidthFourK} {
-    display: flex;
-    align-items: center;
-    padding: ${adaptiveValueCalc(8)} ${adaptiveValueCalc(6)};
-  }
-`;
-
-const SearchCloseIconResize = () => {
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  return (
-    <SearchCloseIcon
-      style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-    />
-  );
-};
-
-// Components
-const SearchCloseMoreButtons = ({
-  isNeedToShow,
-  position,
-  clearSearchValue,
-}: {
-  isNeedToShow: boolean;
-  position: PositionProps;
-  clearSearchValue: React.Dispatch<React.SetStateAction<string>>;
-}) => {
-  const router = useRouter();
-  const { term } = router.query;
-  return (
-    <StyledSearchCloseMoreButtons position={position}>
-      {isNeedToShow ? (
-        <StyledCloseIcon
-          onClick={() => {
-            if (term) {
-              router
-                .push({
-                  query: { ...router.query, term: [] },
-                })
-                .then(() => clearSearchValue(''));
-            }
-
-            clearSearchValue('');
-          }}
-        >
-          <SearchCloseIconResize />
-        </StyledCloseIcon>
-      ) : null}
-    </StyledSearchCloseMoreButtons>
-  );
-};
-
-// Export
-
-export default SearchCloseMoreButtons;

package/src/components/search/searchResultCaption/index.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-
-import Skeleton from 'react-loading-skeleton';
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { AccentColor, BlackColor } from '@/styles/colors';
-import { FH3 } from '@/styles/typography';
-
-// Styles
-
-const StyledSearchResultCaption = styled.div`
-  margin: 24px 0 16px 0;
-
-  .caption {
-    ${FH3};
-    color: ${BlackColor};
-
-    strong {
-      margin-right: 8px;
-      color: ${AccentColor};
-    }
-  }
-
-  .skeleton-caption-search {
-    height: 27px;
-    max-width: 250px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin: ${adaptiveValueCalc(24)} 0 ${adaptiveValueCalc(16)} 0;
-
-    .caption {
-      strong {
-        margin-right: ${adaptiveValueCalc(8)};
-      }
-    }
-
-    .skeleton-caption-search {
-      height: ${adaptiveValueCalc(27)};
-      max-width: ${adaptiveValueCalc(250)};
-    }
-  }
-`;
-
-// Component
-
-const SearchResultCaption = ({
-  nftCounter = 0,
-  searchQuery,
-  isLoading,
-}: {
-  nftCounter: number;
-  isLoading: boolean;
-  searchQuery: string | null;
-}) => {
-  const searchText =
-    searchQuery && searchQuery.length
-      ? `search results for "${searchQuery}"`
-      : 'search results';
-
-  return (
-    <StyledSearchResultCaption>
-      {isLoading ? (
-        <Skeleton className="skeleton-caption-search" />
-      ) : (
-        <p className={'caption'}>
-          <strong>{nftCounter.toLocaleString('ru-RU')}</strong>
-          {searchText}
-        </p>
-      )}
-    </StyledSearchResultCaption>
-  );
-};
-// Export
-export default SearchResultCaption;