@ludo.ninja/components 2.3.6 → 2.3.8

package/build/components/search/searchSuggestions/searchSuggestionsFooter/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+const vars_1 = require("../../../../fonts/vars");
+// Styles
+const StyledSearchSuggestionsFooter = styled_components_1.default.div `
+  .footer {
+    font-family: ${vars_1.dmsansFontVarCss.css};
+    ${typography_1.TextSmall};
+    border-top: 1px solid ${colors_1.BorderColorLight};
+    color: ${colors_1.TextGrayColor};
+    text-align: center;
+    margin-top: auto;
+    user-select: none;
+
+    .text {
+      padding: 12px 0;
+
+      strong {
+        font-weight: 700;
+        color: ${colors_1.BlackColor};
+      }
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    //border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
+    //border-bottom-right-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
+
+    .footer {
+      border-top: ${(0, _4k_1.adaptiveValueCalc)(1)} solid ${colors_1.BorderColorLight};
+
+      .text {
+        padding: ${(0, _4k_1.adaptiveValueCalc)(12)} 0;
+      }
+    }
+  }
+`;
+// Components
+const SearchSuggestionsFooter = () => {
+    return ((0, jsx_runtime_1.jsx)(StyledSearchSuggestionsFooter, { children: (0, jsx_runtime_1.jsx)("div", { className: ` footer`, children: (0, jsx_runtime_1.jsxs)("p", { className: 'text', children: ["Press ", (0, jsx_runtime_1.jsx)("strong", { children: "Enter" }), " to search all results"] }) }) }));
+};
+// Export
+exports.default = SearchSuggestionsFooter;

package/build/components/search/searchSuggestions/searchSuggestionsItem/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    name: string;
+    link: string;
+    imgUrl: string;
+    borderRadius?: boolean;
+    additionalHTML?: React.ReactNode;
+    afterText?: React.ReactNode;
+    searchTerm?: string;
+}
+declare const SearchSuggestionsItem: React.FC<Props>;
+export default SearchSuggestionsItem;

package/build/components/search/searchSuggestions/searchSuggestionsItem/index.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const utils_1 = require("@ludo.ninja/utils");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+const ImageInterceptor_1 = require("../../../../system/Img/ImageInterceptor");
+// Styles
+const StyledSearchSuggestionsItem = styled_components_1.default.div `
+  user-select: none;
+
+  .link {
+    text-decoration: none;
+    display: flex;
+    padding: 6px 0;
+    border-radius: 8px;
+    gap: 8px;
+    align-items: center;
+    position: relative;
+
+    & > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    img {
+      border-radius: ${(props) => (props.borderRadius ? '16px' : 'none')};
+      width: 32px;
+      height: 32px;
+    }
+
+    .additional {
+      white-space: nowrap;
+      ${typography_1.FH5};
+      color: ${colors_1.TextDarkGrayColor};
+      margin-left: auto;
+    }
+
+    .text {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      overflow: hidden;
+
+      .badge{
+        width: 18px;
+        height: 18px;
+      }
+
+      .strong {
+        font-weight: 600;
+        color: ${colors_1.BlackColor};
+        font-size: 18px;
+        line-height: 26px;
+      }
+
+      .regular {
+        ${typography_1.FH5};
+        color: ${colors_1.TextGrayColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      width: calc(100% + 12px);
+      height: 100%;
+      top: 0;
+      left: -6px;
+      border-radius: 8px;
+      transition: background-color 200ms;
+    }
+
+    &:hover:before {
+      background: #ecf0fc;
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    .link {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(6)} 0;
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+
+      img {
+        border-radius: ${(props) => props.borderRadius ? (0, _4k_1.adaptiveValueCalc)(16) : 'none'};
+        width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+        height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      }
+
+      .text {
+        .badge{
+          width:  ${(0, _4k_1.adaptiveValueCalc)(18)};
+          height:  ${(0, _4k_1.adaptiveValueCalc)(18)};
+        }
+
+        .strong {
+          font-size: ${(0, _4k_1.adaptiveValueCalc)(18)};
+          line-height: ${(0, _4k_1.adaptiveValueCalc)(26)};
+        }
+      }
+
+      &:before {
+        width: calc(100% + ${(0, _4k_1.adaptiveValueCalc)(12)});
+        left: ${(0, _4k_1.adaptiveValueCalc)(-6)};
+        border-radius: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      }
+    }
+  }
+`;
+// Components
+const SearchSuggestionsItem = ({ name, link, imgUrl, borderRadius, additionalHTML, searchTerm, afterText }) => ((0, jsx_runtime_1.jsx)(StyledSearchSuggestionsItem, { borderRadius: borderRadius, children: (0, jsx_runtime_1.jsxs)("a", { href: link, className: 'link', children: [(0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: borderRadius && 16, children: (0, jsx_runtime_1.jsx)("img", { src: imgUrl, alt: 'pirate', width: 32, height: 32 }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'text', children: [(0, jsx_runtime_1.jsx)("p", { className: 'regular', children: (0, utils_1.searchQueryLetters)({
+                            text: name,
+                            searchQuery: searchTerm,
+                            className: 'strong',
+                        }) }), afterText] }), additionalHTML] }) }));
+// Export
+exports.default = SearchSuggestionsItem;

package/build/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton/index.d.ts

@@ -0,0 +1,3 @@
+declare const SearchSuggestionsItemSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const SearchSuggestionsItemsSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default SearchSuggestionsItemSkeleton;

package/build/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton/index.js

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchSuggestionsItemsSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_loading_skeleton_1 = __importStar(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const searchSuggestionsCaption_1 = __importDefault(require("../../searchSuggestionsCaption"));
+const ScreenWidth_1 = require("../../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../../styles/colors");
+// Styles
+const StyledSearchSuggestionsItemSkeleton = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  height: 44px;
+  align-items: center;
+
+  & > * {
+    overflow: hidden;
+    display: flex;
+    height: 32px;
+    border-radius: 6px;
+
+    &:nth-child(1) {
+      flex: 1 32px;
+      min-width: 32px;
+      max-width: 32px;
+    }
+
+    &:nth-child(2) {
+      flex: 1 336px;
+    }
+
+    &:nth-child(3) {
+      flex: 1 65px;
+      min-width: 32px;
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(44)};
+
+    & > * {
+      height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+
+      &:nth-child(1) {
+        flex: 1 ${(0, _4k_1.adaptiveValueCalc)(32)};
+        min-width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+        max-width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      }
+
+      &:nth-child(2) {
+        flex: 1 ${(0, _4k_1.adaptiveValueCalc)(336)};
+      }
+
+      &:nth-child(3) {
+        flex: 1 ${(0, _4k_1.adaptiveValueCalc)(65)};
+        min-width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      }
+    }
+  }
+`;
+// Components
+const SearchSuggestionsItemSkeleton = () => ((0, jsx_runtime_1.jsx)(StyledSearchSuggestionsItemSkeleton, { children: (0, jsx_runtime_1.jsxs)(react_loading_skeleton_1.SkeletonTheme, { baseColor: colors_1.InactiveButtonColor, children: [(0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, {}), (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, {}), (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, {})] }) }));
+const SContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const SSkeleton = styled_components_1.default.div `
+  @media (min-width: 768px) {
+    max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    max-height: calc(
+      var(--app-height) - ${(0, _4k_1.adaptiveValueCalc)(124)} - ${(0, _4k_1.adaptiveValueCalc)(50)} -
+        ${(0, _4k_1.adaptiveValueCalc)(24)} - ${(0, _4k_1.adaptiveValueCalc)(10)} -
+        ${(0, _4k_1.adaptiveValueCalc)(24)}
+    );
+  }
+`;
+const SearchSuggestionsItemsSkeleton = () => ((0, jsx_runtime_1.jsx)(SSkeleton, { children: ['NFTs', 'Collections', 'Profiles'].map((item) => ((0, jsx_runtime_1.jsx)(searchSuggestionsCaption_1.default, { caption: item, children: (0, jsx_runtime_1.jsx)(SContainer, { children: Array.from({ length: 3 }, (_, index) => ((0, jsx_runtime_1.jsx)(SearchSuggestionsItemSkeleton, {}, index))) }) }, item))) }));
+exports.SearchSuggestionsItemsSkeleton = SearchSuggestionsItemsSkeleton;
+// Export
+exports.default = SearchSuggestionsItemSkeleton;

package/build/components/search/searchSuggestions/searchSuggestionsNotFound/index.d.ts

@@ -0,0 +1,4 @@
+declare const SearchSuggestionsNotFound: ({ notFoundText, }: {
+    notFoundText: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SearchSuggestionsNotFound;

package/build/components/search/searchSuggestions/searchSuggestionsNotFound/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+// Styles
+const StyledSearchSuggestionsNotFound = styled_components_1.default.div `
+  ${typography_1.FH5};
+  color: ${colors_1.TextGrayColor};
+  text-align: left;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-top: 1px solid ${colors_1.BorderColorLight};
+
+  .text {
+    padding: 24px 0 14px 0;
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    border-top: unset;
+    padding: 0;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    //border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
+    padding-top: ${(0, _4k_1.adaptiveValueCalc)(12)};
+    padding-bottom: ${(0, _4k_1.adaptiveValueCalc)(12)};
+    border-top: ${(0, _4k_1.adaptiveValueCalc)(1)} solid ${colors_1.BorderColorLight};
+
+    .text {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(24)} 0 ${(0, _4k_1.adaptiveValueCalc)(14)} 0;
+    }
+  }
+`;
+// Components
+const SearchSuggestionsNotFound = ({ notFoundText, }) => {
+    return ((0, jsx_runtime_1.jsx)(StyledSearchSuggestionsNotFound, { children: (0, jsx_runtime_1.jsxs)("p", { children: ["No results found for \u201C", notFoundText, "\u201D"] }) }));
+};
+// Export
+exports.default = SearchSuggestionsNotFound;

package/build/components/searchFiltersConnector/filters/applyResetBtns/index.d.ts

@@ -0,0 +1,5 @@
+declare const ApplyResetButtons: ({ onReset, onApply, }: {
+    onReset: () => void;
+    onApply: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ApplyResetButtons;

package/build/components/searchFiltersConnector/filters/applyResetBtns/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const colors_1 = require("../../../../styles/colors");
+const z_indexes_1 = require("../../../../styles/mixins/z-indexes");
+const MainButton_1 = __importDefault(require("../../../../system/Buttons/MainButton"));
+// Styles
+const StyledApplyResetButtons = styled_components_1.default.div `
+  z-index: ${z_indexes_1.zIndexApplyResetBtns.toString()};
+  display: flex;
+  gap: 24px;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  padding: 20px 24px;
+  height: 80px;
+  background-color: ${colors_1.WhiteColor};
+
+  .reset_btn,
+  .apply_btn {
+    width: 144px;
+    height: 100%;
+    button {
+      height: 100%;
+      width: 100%;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 80px;
+    display: block;
+    height: 60px;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      ${colors_1.WhiteColor} 100%
+    );
+  }
+`;
+// Component
+const ApplyResetButtons = ({ onReset, onApply, }) => {
+    return ((0, jsx_runtime_1.jsxs)(StyledApplyResetButtons, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'reset_btn', children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Reset', variant: "outline", onClick: () => onReset() }) }), (0, jsx_runtime_1.jsx)("div", { className: 'apply_btn', children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Apply', variant: "primaryL", onClick: () => onApply() }) })] }));
+};
+// Export
+exports.default = ApplyResetButtons;

package/build/components/searchFiltersConnector/filters/galleriesFiltersForm/index.d.ts

@@ -0,0 +1,10 @@
+import { optionType } from '../../../../system/Forms/Selects/DesktopSelect/type';
+declare const GalleryFiltersForm: ({ selectTypeSearchResult, selectBlockchainSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, handleNeedShowButtons, handleFiltersCount, }: {
+    selectTypeSearchResult: optionType[];
+    selectBlockchainSearchResult: optionType[];
+    selectBlockchainCategoryResult: optionType[];
+    selectBlockchainTimeResult: optionType[];
+    handleNeedShowButtons: (value: boolean) => void;
+    handleFiltersCount: (value: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default GalleryFiltersForm;

package/build/components/searchFiltersConnector/filters/galleriesFiltersForm/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const DropDown_1 = __importDefault(require("../../../../system/DropDown"));
+const RadioInput_1 = __importDefault(require("../../../../system/Forms/RadioInput"));
+// Styles
+const StyledNtfsFiltersForm = styled_components_1.default.div `
+  position: relative;
+`;
+// Component
+const GalleryFiltersForm = ({ selectTypeSearchResult, selectBlockchainSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, handleNeedShowButtons, handleFiltersCount, }) => {
+    const [selectedSearchResult, setSelectedSearchResult] = (0, react_1.useState)(null);
+    const [selectedBlockchainResult, setSelectedBlockchainResult] = (0, react_1.useState)(null);
+    const [selectedBlockchainCategoryResult, setSelectedBlockchainCategoryResult,] = (0, react_1.useState)(null);
+    const [selectedBlockchainTimeResult, setSelectedBlockchainTimeResult] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (selectedSearchResult ||
+            selectedBlockchainResult ||
+            selectedBlockchainCategoryResult ||
+            selectedBlockchainTimeResult) {
+            handleNeedShowButtons(true);
+        }
+        else {
+            handleNeedShowButtons(false);
+        }
+        const arr = [
+            selectedSearchResult,
+            selectedBlockchainResult,
+            selectedBlockchainCategoryResult,
+            selectedBlockchainTimeResult,
+        ];
+        const count = arr.filter((value) => value).length;
+        handleFiltersCount(count);
+    }, [
+        selectedSearchResult,
+        selectedBlockchainResult,
+        selectedBlockchainCategoryResult,
+        selectedBlockchainTimeResult,
+    ]);
+    const handleChangeSearchResult = (value) => {
+        setSelectedSearchResult(value);
+    };
+    const handleChangeBlockchainResult = (value) => {
+        setSelectedBlockchainResult(value);
+    };
+    const handleChangeBlockchainCategoryResult = (value) => {
+        setSelectedBlockchainCategoryResult(value);
+    };
+    const handleChangeBlockchainTimeResult = (value) => {
+        setSelectedBlockchainTimeResult(value);
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledNtfsFiltersForm, { children: [(0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Type', fallBackOnClose: handleChangeSearchResult, children: selectTypeSearchResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedBlockchainResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'BlockChainEntity', fallBackOnClose: handleChangeBlockchainResult, children: selectBlockchainSearchResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainResult, radioChecked: selectedBlockchainResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult, children: selectBlockchainCategoryResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedBlockchainResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult, children: selectBlockchainTimeResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedBlockchainResult === select.id }, select.id))) })] }));
+};
+// Export
+exports.default = GalleryFiltersForm;

package/build/components/searchFiltersConnector/filters/index.d.ts

@@ -0,0 +1,11 @@
+import { searchSchema as schema } from '@ludo.ninja/api';
+import { SelectsType } from '../../../system/Filters/type';
+declare const Filters: ({ filterInputHandler, handleResetFilter, selectData, filterInput, handleMobileFilterInput, isMobile, }: {
+    filterInputHandler: (fieldName: keyof schema.ICreationFilterInput & keyof schema.ICollectionFilterInput, fieldValue: string) => Promise<void>;
+    filterInput: schema.ICreationFilterInput | schema.ICollectionFilterInput;
+    handleResetFilter: () => void;
+    selectData: SelectsType[];
+    handleMobileFilterInput: (newFilters: schema.ICreationFilterInput | schema.ICollectionFilterInput) => Promise<void>;
+    isMobile: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Filters;

package/build/components/searchFiltersConnector/filters/index.js

@@ -0,0 +1,158 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const applyResetBtns_1 = __importDefault(require("./applyResetBtns"));
+const mobileFilters_1 = __importDefault(require("./mobileFilters"));
+const sidebarFilters_1 = __importDefault(require("../../sidebar/sidebarFilters"));
+const ui_1 = require("../../../store/ui");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const DesktopSelect_1 = __importDefault(require("../../../system/Forms/Selects/DesktopSelect"));
+const MobileSelect_1 = __importDefault(require("../../../system/Forms/Selects/MobileSelect"));
+// Styles
+const StyledFilters = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+
+  .select {
+    margin-right: 8px;
+    margin-top: 8px;
+  }
+
+  .type {
+    width: 154px;
+  }
+
+  .blockchain {
+    width: 163px;
+  }
+
+  .category {
+    width: 156px;
+  }
+
+  .time {
+    width: 125px;
+  }
+
+  .status {
+    width: 135px;
+    margin-right: 24px;
+  }
+
+  .filterButton {
+    width: 100%;
+
+    button {
+      position: relative;
+      width: 100%;
+      border: 1px solid transparent;
+      outline: none;
+      background-color: white;
+      padding: 10px 85px;
+      border-radius: 6px;
+      min-height: 40px;
+      font-size: 1.4em;
+      color: ${colors_1.BlackColor};
+      font-weight: 500;
+      transition: all 0.3s ease-in;
+
+      &:hover {
+        transition: all 0.3s ease-in-out;
+        background: ${colors_1.InactiveButtonColor};
+        color: ${colors_1.AccentColor};
+        border: 1px solid ${colors_1.BorderColorLight};
+      }
+
+      .counter {
+        position: absolute;
+        background-color: ${colors_1.AccentColor};
+        color: white;
+        right: -5px;
+        padding: 8px;
+        font-size: 0.86em;
+        font-weight: 500;
+        border-radius: 50%;
+        top: -10px;
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    .select {
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      margin-top: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    }
+    .type {
+      width: ${(0, _4k_1.adaptiveValueCalc)(154)};
+    }
+    .blockchain {
+      width: ${(0, _4k_1.adaptiveValueCalc)(163)};
+    }
+    .category {
+      width: ${(0, _4k_1.adaptiveValueCalc)(156)};
+    }
+    .time {
+      width: ${(0, _4k_1.adaptiveValueCalc)(125)};
+    }
+    .status {
+      width: ${(0, _4k_1.adaptiveValueCalc)(135)};
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    }
+  }
+`;
+// Component
+const Filters = ({ filterInputHandler, handleResetFilter, selectData, filterInput, handleMobileFilterInput, isMobile, }) => {
+    const [isSideBarOpen, setSidebarOpen] = (0, react_1.useState)(false);
+    const [selectedFiltersCount] = (0, react_1.useState)(0);
+    const { openOverLay, closeOverlay } = (0, ui_1.useUiStore)((state) => ({
+        openOverLay: state.openOverLay,
+        closeOverlay: state.closeOverlay,
+    }));
+    const [mobileFilterInput, setMobileFilterInput] = (0, react_1.useState)(filterInput);
+    (0, react_1.useEffect)(() => {
+        if (JSON.stringify(mobileFilterInput) !== JSON.stringify(filterInput)) {
+            setMobileFilterInput(filterInput);
+        }
+    }, [filterInput]);
+    const handleMobileFilters = (fieldName, fieldValue) => {
+        setMobileFilterInput((prevFilters) => ({
+            ...prevFilters,
+            [fieldName]: fieldValue,
+        }));
+    };
+    const closeFiltersMobile = () => {
+        closeOverlay();
+        setSidebarOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledFilters, { children: [!isMobile &&
+                selectData.map((select) => ((0, jsx_runtime_1.jsx)("div", { className: `select ${select.data.selectName}`, children: (0, jsx_runtime_1.jsx)(DesktopSelect_1.default, { defaultOptionValue: filterInput[select.data.selectName], options: select.data.selectOptions, isLoading: false, onChangeHandler: filterInputHandler, name: select.data.selectName }) }, select.id))), isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'filterButton', children: (0, jsx_runtime_1.jsxs)("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                openOverLay();
+                                setSidebarOpen(true);
+                            }, children: ["Filters", selectedFiltersCount ? ((0, jsx_runtime_1.jsx)("span", { className: 'counter', children: selectedFiltersCount })) : null] }) }), (0, jsx_runtime_1.jsxs)(sidebarFilters_1.default, { isOpen: isSideBarOpen, handleClose: () => {
+                            setMobileFilterInput(filterInput);
+                            closeFiltersMobile();
+                        }, children: [(0, jsx_runtime_1.jsx)(mobileFilters_1.default, { children: selectData.map((select) => ((0, jsx_runtime_1.jsx)(MobileSelect_1.default, { defaultOptionValue: mobileFilterInput[select.data
+                                        .selectName], options: select.data.selectOptions, name: select.data.selectName, onChangeHandler: handleMobileFilters }, select.id))) }), (0, jsx_runtime_1.jsx)(applyResetBtns_1.default, { onReset: () => {
+                                    handleResetFilter();
+                                    closeFiltersMobile();
+                                }, onApply: () => {
+                                    handleMobileFilterInput(mobileFilterInput);
+                                    closeFiltersMobile();
+                                } })] })] }))] }));
+};
+// Export
+exports.default = Filters;