@ludo.ninja/components 1.5.8 → 1.6.0

package/dist/components/favoriteList/add/addCreationToFavoriteList/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    ids: string[];
+    currentMyGalleryId?: false | string | undefined;
+}
+declare const AddCreationToFavoriteList: React.FC<Props>;
+export default AddCreationToFavoriteList;

package/dist/components/favoriteList/add/addCreationToFavoriteList/index.jsx

@@ -0,0 +1,68 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState } from 'react';
+import ChooseGalleryItems from '@/modules/gallery/ui/chooseGalleryItems';
+import CreateGalleryForm from '@/modules/gallery/ui/createGalleryForm';
+import { useUiStore } from '@/store/ui';
+import { useAddCreationsToGalleryV2 } from '@/api/server-galleries/mutations/useAddCreationsToGallery';
+import { useCreateFavoriteListV2 } from '@/api/server-galleries/mutations/useCreateFavorites';
+// Component
+var AddCreationToFavoriteList = function (_a) {
+    var ids = _a.ids, currentMyGalleryId = _a.currentMyGalleryId;
+    var _b = useState(false), isNeedAddFavList = _b[0], setAddFavList = _b[1];
+    var closeModalSidebarPortal = useUiStore(function (state) { return state.closeModalSidebarPortal; });
+    var _c = useCreateFavoriteListV2(), createFavorites = _c.createFavorites, errorCreateFavorites = _c.errorCreateFavorites;
+    var _d = useAddCreationsToGalleryV2(), addCreationsToGallery = _d.addCreationsToGallery, isAdded = _d.isAdded, error = _d.error;
+    var addMethod = function (galleryId, ids) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, addCreationsToGallery({ galleryId: galleryId, creationIds: ids })];
+                case 1:
+                    _a.sent();
+                    setTimeout(function () { return closeModalSidebarPortal(); }, 900);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (<div>
+      {isNeedAddFavList ? (<CreateGalleryForm setAddGallery={setAddFavList} title={'Create Favourite List'} inputPlaceHolderText={'List Name'} 
+        // ids={ids}
+        createMethod={createFavorites} error={errorCreateFavorites}/>) : (<ChooseGalleryItems setAddGallery={setAddFavList} title={'Add to Favourite List'} titleBtn={'+ New Favourite List'} ids={ids} addMethod={addMethod} isAdded={isAdded} error={error} currentMyGalleryId={currentMyGalleryId}/>)}
+    </div>);
+};
+// Export
+export default AddCreationToFavoriteList;

package/dist/components/filters/applyResetBtns/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const ApplyResetButtons: ({ onReset, onApply, }: {
+    onReset: () => void;
+    onApply: () => void;
+}) => React.JSX.Element;
+export default ApplyResetButtons;

package/dist/components/filters/applyResetBtns/index.jsx

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { WhiteColor } from '@/styles/colors';
+import { zIndexApplyResetBtns } from '@/styles/mixins/z-indexes';
+import MainButton from '@/system/Buttons/MainButton';
+// Styles
+var StyledApplyResetButtons = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n  display: flex;\n  gap: 24px;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  padding: 20px 24px;\n  height: 80px;\n  background-color: ", ";\n\n  .reset_btn,\n  .apply_btn {\n    width: 144px;\n    height: 100%;\n    button {\n      height: 100%;\n      width: 100%;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 80px;\n    display: block;\n    height: 60px;\n    background: linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 100%\n    );\n  }\n"], ["\n  z-index: ", ";\n  display: flex;\n  gap: 24px;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  padding: 20px 24px;\n  height: 80px;\n  background-color: ", ";\n\n  .reset_btn,\n  .apply_btn {\n    width: 144px;\n    height: 100%;\n    button {\n      height: 100%;\n      width: 100%;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 80px;\n    display: block;\n    height: 60px;\n    background: linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 100%\n    );\n  }\n"])), zIndexApplyResetBtns.toString(), WhiteColor, WhiteColor);
+// Component
+var ApplyResetButtons = function (_a) {
+    var onReset = _a.onReset, onApply = _a.onApply;
+    return (<StyledApplyResetButtons>
+      <div className={'reset_btn'}>
+        <MainButton text={'Reset'} variant="outline" onClick={function () { return onReset(); }}/>
+      </div>
+      <div className={'apply_btn'}>
+        <MainButton text={'Apply'} variant="primaryL" onClick={function () { return onApply(); }}/>
+      </div>
+    </StyledApplyResetButtons>);
+};
+// Export
+export default ApplyResetButtons;
+var templateObject_1;

package/dist/components/filters/galleriesFiltersForm/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+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;
+}) => React.JSX.Element;
+export default GalleryFiltersForm;

package/dist/components/filters/galleriesFiltersForm/index.jsx

@@ -0,0 +1,71 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import DropDown from '@/system/DropDown';
+import BasicRadioInput from '@/system/Forms/RadioInput';
+// Styles
+var StyledNtfsFiltersForm = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+// Component
+var GalleryFiltersForm = function (_a) {
+    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainSearchResult = _a.selectBlockchainSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult, handleNeedShowButtons = _a.handleNeedShowButtons, handleFiltersCount = _a.handleFiltersCount;
+    var _b = useState(null), selectedSearchResult = _b[0], setSelectedSearchResult = _b[1];
+    var _c = useState(null), selectedBlockchainResult = _c[0], setSelectedBlockchainResult = _c[1];
+    var _d = useState(null), selectedBlockchainCategoryResult = _d[0], setSelectedBlockchainCategoryResult = _d[1];
+    var _e = useState(null), selectedBlockchainTimeResult = _e[0], setSelectedBlockchainTimeResult = _e[1];
+    useEffect(function () {
+        if (selectedSearchResult ||
+            selectedBlockchainResult ||
+            selectedBlockchainCategoryResult ||
+            selectedBlockchainTimeResult) {
+            handleNeedShowButtons(true);
+        }
+        else {
+            handleNeedShowButtons(false);
+        }
+        var arr = [
+            selectedSearchResult,
+            selectedBlockchainResult,
+            selectedBlockchainCategoryResult,
+            selectedBlockchainTimeResult,
+        ];
+        var count = arr.filter(function (value) { return value; }).length;
+        handleFiltersCount(count);
+    }, [
+        selectedSearchResult,
+        selectedBlockchainResult,
+        selectedBlockchainCategoryResult,
+        selectedBlockchainTimeResult,
+    ]);
+    var handleChangeSearchResult = function (value) {
+        setSelectedSearchResult(value);
+    };
+    var handleChangeBlockchainResult = function (value) {
+        setSelectedBlockchainResult(value);
+    };
+    var handleChangeBlockchainCategoryResult = function (value) {
+        setSelectedBlockchainCategoryResult(value);
+    };
+    var handleChangeBlockchainTimeResult = function (value) {
+        setSelectedBlockchainTimeResult(value);
+    };
+    return (<StyledNtfsFiltersForm>
+      <DropDown caption={'Type'} fallBackOnClose={handleChangeSearchResult}>
+        {selectTypeSearchResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeSearchResult} radioChecked={selectedBlockchainResult === select.id}/>); })}
+      </DropDown>
+      <DropDown caption={'BlockChainEntity'} fallBackOnClose={handleChangeBlockchainResult}>
+        {selectBlockchainSearchResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeBlockchainResult} radioChecked={selectedBlockchainResult === select.id}/>); })}
+      </DropDown>
+      <DropDown caption={'Category'} fallBackOnClose={handleChangeBlockchainCategoryResult}>
+        {selectBlockchainCategoryResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeBlockchainCategoryResult} radioChecked={selectedBlockchainResult === select.id}/>); })}
+      </DropDown>
+      <DropDown caption={'Time'} fallBackOnClose={handleChangeBlockchainTimeResult}>
+        {selectBlockchainTimeResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeBlockchainTimeResult} radioChecked={selectedBlockchainResult === select.id}/>); })}
+      </DropDown>
+    </StyledNtfsFiltersForm>);
+};
+// Export
+export default GalleryFiltersForm;
+var templateObject_1;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+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;
+}) => React.JSX.Element;
+export default Filters;

package/dist/components/filters/index.jsx

@@ -0,0 +1,92 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { useUiStore } from '@/store/ui';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { AccentColor, BlackColor, BorderColorLight, InactiveButtonColor, } from '@/styles/colors';
+import ApplyResetButtons from '@/components/filters/applyResetBtns';
+import MobileFilters from '@/components/filters/mobileFilters';
+import SidebarFilters from '@/components/sidebar/sidebarFilters';
+import DesktopSelect from '@/system/Forms/Selects/DesktopSelect';
+import MobileSelect from '@/system/Forms/Selects/MobileSelect';
+// Styles
+var StyledFilters = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), BlackColor, InactiveButtonColor, AccentColor, BorderColorLight, AccentColor, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(154), adaptiveValueCalc(163), adaptiveValueCalc(156), adaptiveValueCalc(125), adaptiveValueCalc(135), adaptiveValueCalc(24));
+// Component
+var Filters = function (_a) {
+    var filterInputHandler = _a.filterInputHandler, handleResetFilter = _a.handleResetFilter, selectData = _a.selectData, filterInput = _a.filterInput, handleMobileFilterInput = _a.handleMobileFilterInput, isMobile = _a.isMobile;
+    var _b = useState(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
+    var selectedFiltersCount = useState(0)[0];
+    var _c = useUiStore(function (state) { return ({
+        openOverLay: state.openOverLay,
+        closeOverlay: state.closeOverlay,
+    }); }), openOverLay = _c.openOverLay, closeOverlay = _c.closeOverlay;
+    var _d = useState(filterInput), mobileFilterInput = _d[0], setMobileFilterInput = _d[1];
+    useEffect(function () {
+        if (JSON.stringify(mobileFilterInput) !== JSON.stringify(filterInput)) {
+            setMobileFilterInput(filterInput);
+        }
+    }, [filterInput]);
+    var handleMobileFilters = function (fieldName, fieldValue) {
+        setMobileFilterInput(function (prevFilters) {
+            var _a;
+            return (__assign(__assign({}, prevFilters), (_a = {}, _a[fieldName] = fieldValue, _a)));
+        });
+    };
+    var closeFiltersMobile = function () {
+        closeOverlay();
+        setSidebarOpen(false);
+    };
+    return (<StyledFilters>
+      {!isMobile &&
+            selectData.map(function (select) { return (<div key={select.id} className={"select ".concat(select.data.selectName)}>
+            <DesktopSelect defaultOptionValue={filterInput[select.data.selectName]} options={select.data.selectOptions} isLoading={false} onChangeHandler={filterInputHandler} name={select.data.selectName}/>
+          </div>); })}
+      {isMobile && (<>
+          <div className={'filterButton'}>
+            <button onClick={function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                openOverLay();
+                setSidebarOpen(true);
+            }}>
+              Filters
+              {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
+            </button>
+          </div>
+          <SidebarFilters isOpen={isSideBarOpen} handleClose={function () {
+                setMobileFilterInput(filterInput);
+                closeFiltersMobile();
+            }}>
+            <MobileFilters>
+              {selectData.map(function (select) { return (<MobileSelect key={select.id} defaultOptionValue={mobileFilterInput[select.data
+                    .selectName]} options={select.data.selectOptions} name={select.data.selectName} onChangeHandler={handleMobileFilters}/>); })}
+            </MobileFilters>
+            <ApplyResetButtons onReset={function () {
+                handleResetFilter();
+                closeFiltersMobile();
+            }} onApply={function () {
+                handleMobileFilterInput(mobileFilterInput);
+                closeFiltersMobile();
+            }}/>
+          </SidebarFilters>
+        </>)}
+    </StyledFilters>);
+};
+// Export
+export default Filters;
+var templateObject_1;

package/dist/components/filters/mobileFilters/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const MobileFilters: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default MobileFilters;

package/dist/components/filters/mobileFilters/index.jsx

@@ -0,0 +1,16 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+// Styles
+var StyledMobileFilters = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 32px;\n\n  & > div:last-child {\n    margin-bottom: 30px;\n    border-bottom: unset;\n  }\n"], ["\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 32px;\n\n  & > div:last-child {\n    margin-bottom: 30px;\n    border-bottom: unset;\n  }\n"])));
+// Component
+var MobileFilters = function (_a) {
+    var children = _a.children;
+    return <StyledMobileFilters>{children}</StyledMobileFilters>;
+};
+// Export
+export default MobileFilters;
+var templateObject_1;

package/dist/components/filters/setsFiltersForm/index.d.ts

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

package/dist/components/filters/setsFiltersForm/index.jsx

@@ -0,0 +1,61 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import DropDown from '@/system/DropDown';
+import BasicRadioInput from '@/system/Forms/RadioInput';
+// Styles
+var StyledSetsFiltersForm = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+// Component
+var SetsFiltersForm = function (_a) {
+    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult, handleNeedShowButtons = _a.handleNeedShowButtons, handleFiltersCount = _a.handleFiltersCount;
+    var _b = useState(null), selectedSearchResult = _b[0], setSelectedSearchResult = _b[1];
+    var _c = useState(null), selectedBlockchainCategoryResult = _c[0], setSelectedBlockchainCategoryResult = _c[1];
+    var _d = useState(null), selectedBlockchainTimeResult = _d[0], setSelectedBlockchainTimeResult = _d[1];
+    useEffect(function () {
+        if (selectedSearchResult ||
+            selectedBlockchainCategoryResult ||
+            selectedBlockchainTimeResult) {
+            handleNeedShowButtons(true);
+        }
+        else {
+            handleNeedShowButtons(false);
+        }
+        var arr = [
+            selectedSearchResult,
+            selectedBlockchainCategoryResult,
+            selectedBlockchainTimeResult,
+        ];
+        var count = arr.filter(function (value) { return value; }).length;
+        handleFiltersCount(count);
+    }, [
+        selectedSearchResult,
+        selectedBlockchainCategoryResult,
+        selectedBlockchainTimeResult,
+    ]);
+    var handleChangeSearchResult = function (value) {
+        setSelectedSearchResult(value);
+    };
+    var handleChangeBlockchainCategoryResult = function (value) {
+        setSelectedBlockchainCategoryResult(value);
+    };
+    var handleChangeBlockchainTimeResult = function (value) {
+        setSelectedBlockchainTimeResult(value);
+    };
+    return (<StyledSetsFiltersForm>
+      <DropDown caption={'Type'} fallBackOnClose={handleChangeSearchResult}>
+        {selectTypeSearchResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeSearchResult} radioChecked={selectedSearchResult === select.id}/>); })}
+      </DropDown>
+      <DropDown caption={'Category'} fallBackOnClose={handleChangeBlockchainCategoryResult}>
+        {selectBlockchainCategoryResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeBlockchainCategoryResult} radioChecked={selectedSearchResult === select.id}/>); })}
+      </DropDown>
+      <DropDown caption={'Time'} fallBackOnClose={handleChangeBlockchainTimeResult}>
+        {selectBlockchainTimeResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeBlockchainTimeResult} radioChecked={selectedSearchResult === select.id}/>); })}
+      </DropDown>
+    </StyledSetsFiltersForm>);
+};
+// Export
+export default SetsFiltersForm;
+var templateObject_1;

package/dist/components/forms/form/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputProps } from '../types';
+interface Props {
+    onSubmit: (data: unknown) => void;
+    submitLoading: boolean;
+    formDescription: string;
+    formTitle: string;
+    inputs: InputProps[];
+    initialValues?: {
+        [key: string]: any;
+    };
+}
+declare const Form: ({ ...props }: Props) => React.JSX.Element;
+export default Form;

package/dist/components/forms/form/index.jsx

@@ -0,0 +1,118 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect } from 'react';
+import { Spinner } from 'react-bootstrap';
+import { Controller, useForm } from 'react-hook-form';
+import styled from 'styled-components';
+import { TextGrayColor } from '@ludo.ninja/ui/build/styles/colors';
+import { MainText } from '@ludo.ninja/ui/build/system/Text';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import MainButton from '@/system/Buttons/MainButton';
+import { BasicTextArea, CheckboxInput, Input } from '@/system/Forms';
+import DatePicker from '@/system/Forms/DatePicker';
+import BasicRadioInput from '@/system/Forms/RadioInput';
+import { Flex, H1, H5 } from '@system';
+var Title = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  text-align: center;\n"], ["\n  margin-bottom: 24px;\n  text-align: center;\n"])));
+var Description = styled(MainText)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-align: justify;\n"], ["\n  color: ", ";\n  text-align: justify;\n"])), TextGrayColor);
+var Wrapper = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"], ["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"])), mediaQuery.tablet);
+var FormWrapper = styled.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"], ["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"])), mediaQuery.desktop, mediaQuery.tablet);
+var InputTitle = styled(H5)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+var RadioInput = styled(BasicRadioInput)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), TextGrayColor);
+var StyledInputGroup = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"], ["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"])));
+var Form = function (_a) {
+    var props = __rest(_a, []);
+    var inputs = props.inputs, onSubmit = props.onSubmit, submitLoading = props.submitLoading, formDescription = props.formDescription, formTitle = props.formTitle, initialValues = props.initialValues;
+    var _b = useForm({
+        mode: 'all',
+        defaultValues: initialValues,
+    }), register = _b.register, _c = _b.formState, errors = _c.errors, isDirty = _c.isDirty, isValid = _c.isValid, handleSubmit = _b.handleSubmit, reset = _b.reset, control = _b.control, setFocus = _b.setFocus, formState = _b.formState;
+    useEffect(function () {
+        reset();
+    }, [inputs, reset]);
+    useEffect(function () {
+        if (formState.isSubmitSuccessful) {
+            reset();
+        }
+    }, [formState, reset]);
+    var getInput = function (inputProps) {
+        var _a, _b;
+        var dataProp = {
+            labelText: inputProps.label || '',
+            name: inputProps.name,
+            placeHolder: inputProps.placeholder || '',
+        };
+        var inputErrors = errors === null || errors === void 0 ? void 0 : errors[inputProps.name];
+        var errorProp = {
+            isNeedShowError: Boolean(inputErrors),
+            message: inputErrors ? inputErrors.message : '',
+        };
+        var registerProp = register(inputProps.name, inputProps.validations);
+        switch (inputProps.type) {
+            case 'textArea':
+                return (<BasicTextArea register={registerProp} error={errorProp} data={dataProp} isNeedBiggerArea={false}/>);
+            case 'checkbox':
+                return (<>
+            {(_a = inputProps.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
+                        var isCheckboxWithInput = option.value === 'other';
+                        var registerTextInput = isCheckboxWithInput
+                            ? register("".concat(inputProps.name, "-other-checkbox"))
+                            : undefined;
+                        return (<CheckboxInput key={option.value} register={registerProp} error={errorProp} data={dataProp} label={option.desc} value={option.value} withInput={isCheckboxWithInput} innerTextInputRef={registerTextInput}/>);
+                    })}
+          </>);
+            case 'radio':
+                return (<>
+            {(_b = inputProps.options) === null || _b === void 0 ? void 0 : _b.map(function (option) {
+                        var isRadioWithInput = option.value === 'other';
+                        var registerTextInput = isRadioWithInput
+                            ? register("".concat(inputProps.name, "-other-radio"))
+                            : undefined;
+                        return (<Controller key={option.desc} name={inputProps.name} control={control} render={function (_a) {
+                                var field = _a.field;
+                                return (<RadioInput key={option.value} radioLabel={option.desc} radioValue={option.value} handleChange={field.onChange} radioChecked={field.value === option.value} withInput={isRadioWithInput} innerTextInputRef={registerTextInput} setFocus={setFocus}/>);
+                            }}/>);
+                    })}
+          </>);
+            case 'date':
+                return (<DatePicker register={registerProp} error={errorProp} control={control} name={inputProps.name}/>);
+            default:
+                return (<Input register={registerProp} error={errorProp} data={dataProp}/>);
+        }
+    };
+    return (<Wrapper>
+      <FormWrapper onSubmit={handleSubmit(onSubmit)}>
+        <Title>{formTitle}</Title>
+        <Description>{formDescription}</Description>
+        {inputs.map(function (input) {
+            var _a;
+            return (<StyledInputGroup key={input.name}>
+            <InputTitle>
+              {((_a = input.validations) === null || _a === void 0 ? void 0 : _a.required) ? '*' : ''}
+              {input.label}
+            </InputTitle>
+            {getInput(input)}
+          </StyledInputGroup>);
+        })}
+
+        <Flex justifyContent="space-between" style={{ marginTop: 44 }}>
+          <MainButton onClick={function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }} disabled={!isDirty || !isValid} variant="primaryM" text={submitLoading ? <Spinner variant="light"/> : 'Submit'} type={'submit'}/>
+          <MainButton onClick={function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }} disabled={!isDirty} variant="secondary" text={submitLoading ? <Spinner variant="light"/> : 'Clear Form'} type={'reset'}/>
+        </Flex>
+      </FormWrapper>
+    </Wrapper>);
+};
+export default Form;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/forms/formsNavigation/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FormsNavigation: () => React.JSX.Element;
+export default FormsNavigation;

package/dist/components/forms/formsNavigation/index.jsx

@@ -0,0 +1,54 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BackgroundColorLight, BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
+import { FormsNavigationTabs } from '@/components/forms/types';
+import { Flex } from '@system';
+import BackIcon from '@/public/settings_page/back.svg';
+import MenuIcon from '@/public/settings_page/burger_menu.svg';
+var NAVIGATION_TABS = [
+    { slug: FormsNavigationTabs.opportunity, label: 'opportunity Submission' },
+    { slug: FormsNavigationTabs.contactSupport, label: 'Contact Ludo Support' },
+    {
+        slug: FormsNavigationTabs.registrationRequest,
+        label: 'Registration Invite Request',
+    },
+    { slug: FormsNavigationTabs.report, label: 'Content Report Form' },
+    { slug: FormsNavigationTabs.feedback, label: 'User Feedback' },
+    { slug: FormsNavigationTabs.partnership, label: 'Partnership Inquiry Form' },
+    {
+        slug: FormsNavigationTabs.investor,
+        label: 'Investor Relations Inquiry Form',
+    },
+];
+var StyledFlex = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"])), mediaQuery.tablet);
+var Wrapper = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), mediaQuery.tablet, BackgroundColorLight);
+var List = styled.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"])), mediaQuery.tablet, TextGrayColor, InactiveButtonColor, mediaQuery.tablet, InactiveButtonColor, BlackColor, mediaQuery.tablet);
+var FormsNavigation = function () {
+    var _a;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var router = useRouter();
+    var activeTab = (_a = router === null || router === void 0 ? void 0 : router.query) === null || _a === void 0 ? void 0 : _a.formId;
+    return (<>
+      <StyledFlex isOpen={isOpen}>
+        {isOpen ? (<BackIcon onClick={function () { return setIsOpen(false); }}/>) : (<MenuIcon onClick={function () { return setIsOpen(true); }}/>)}
+      </StyledFlex>
+      <Wrapper className={"mobile_menu ".concat(isOpen ? 'show' : 'hide')}>
+        <List>
+          {NAVIGATION_TABS.map(function (tab) { return (<li onClick={function () { return setIsOpen(false); }} key={tab.slug} className={"".concat(activeTab === tab.slug ? 'activeTab' : '', " ")}>
+              <Link href={"/forms/".concat(tab.slug)} className={'link'}>
+                <span>{tab.label}</span>
+              </Link>
+            </li>); })}
+        </List>
+      </Wrapper>
+    </>);
+};
+export default FormsNavigation;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/forms/formsTemplate/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { GetServerSideProps } from 'next';
+import { FormsNavigationTabs, InputProps } from '@/components/forms/types';
+declare const FormsTemplate: () => React.JSX.Element;
+export declare const getServerSideProps: GetServerSideProps;
+export default FormsTemplate;
+export declare const forms: {
+    [K in FormsNavigationTabs]?: {
+        formTitle: string;
+        formDescription: string;
+        inputs: InputProps[];
+        submitMutation?: any;
+    };
+};