@ludo.ninja/components 1.1.5 → 1.1.6

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

@@ -0,0 +1,52 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 (_jsxs(StyledSetsFiltersForm, { children: [_jsx(DropDown, { caption: 'Type', fallBackOnClose: handleChangeSearchResult, children: selectTypeSearchResult.map(function (select) { return (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedSearchResult === select.id }, select.id)); }) }), _jsx(DropDown, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult, children: selectBlockchainCategoryResult.map(function (select) { return (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedSearchResult === select.id }, select.id)); }) }), _jsx(DropDown, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult, children: selectBlockchainTimeResult.map(function (select) { return (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedSearchResult === select.id }, select.id)); }) })] }));
+};
+// Export
+export default SetsFiltersForm;
+var templateObject_1;

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

@@ -0,0 +1,98 @@
+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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 (_jsx(BasicTextArea, { register: registerProp, error: errorProp, data: dataProp, isNeedBiggerArea: false }));
+            case 'checkbox':
+                return (_jsx(_Fragment, { children: (_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 (_jsx(CheckboxInput, { register: registerProp, error: errorProp, data: dataProp, label: option.desc, value: option.value, withInput: isCheckboxWithInput, innerTextInputRef: registerTextInput }, option.value));
+                    }) }));
+            case 'radio':
+                return (_jsx(_Fragment, { children: (_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 (_jsx(Controller, { name: inputProps.name, control: control, render: function (_a) {
+                                var field = _a.field;
+                                return (_jsx(RadioInput, { radioLabel: option.desc, radioValue: option.value, handleChange: field.onChange, radioChecked: field.value === option.value, withInput: isRadioWithInput, innerTextInputRef: registerTextInput, setFocus: setFocus }, option.value));
+                            } }, option.desc));
+                    }) }));
+            case 'date':
+                return (_jsx(DatePicker, { register: registerProp, error: errorProp, control: control, name: inputProps.name }));
+            default:
+                return (_jsx(Input, { register: registerProp, error: errorProp, data: dataProp }));
+        }
+    };
+    return (_jsx(Wrapper, { children: _jsxs(FormWrapper, { onSubmit: handleSubmit(onSubmit), children: [_jsx(Title, { children: formTitle }), _jsx(Description, { children: formDescription }), inputs.map(function (input) {
+                    var _a;
+                    return (_jsxs(StyledInputGroup, { children: [_jsxs(InputTitle, { children: [((_a = input.validations) === null || _a === void 0 ? void 0 : _a.required) ? '*' : '', input.label] }), getInput(input)] }, input.name));
+                }), _jsxs(Flex, { justifyContent: "space-between", style: { marginTop: 44 }, children: [_jsx(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 ? _jsx(Spinner, { variant: "light" }) : 'Submit', type: 'submit' }), _jsx(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 ? _jsx(Spinner, { variant: "light" }) : 'Clear Form', type: 'reset' })] })] }) }));
+};
+export default Form;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 (_jsxs(_Fragment, { children: [_jsx(StyledFlex, { isOpen: isOpen, children: isOpen ? (_jsx(BackIcon, { onClick: function () { return setIsOpen(false); } })) : (_jsx(MenuIcon, { onClick: function () { return setIsOpen(true); } })) }), _jsx(Wrapper, { className: "mobile_menu ".concat(isOpen ? 'show' : 'hide'), children: _jsx(List, { children: NAVIGATION_TABS.map(function (tab) { return (_jsx("li", { onClick: function () { return setIsOpen(false); }, className: "".concat(activeTab === tab.slug ? 'activeTab' : '', " "), children: _jsx(Link, { href: "/forms/".concat(tab.slug), className: 'link', children: _jsx("span", { children: tab.label }) }) }, tab.slug)); }) }) })] }));
+};
+export default FormsNavigation;
+var templateObject_1, templateObject_2, templateObject_3;