@ludo.ninja/components 1.5.8 → 1.5.9

package/src/components/filters/setsFiltersForm/index.tsx

@@ -1,130 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import styled from 'styled-components';
-
-import DropDown from '@/system/DropDown';
-import BasicRadioInput from '@/system/Forms/RadioInput';
-import { optionType } from '@/system/Forms/Selects/DesktopSelect/type';
-
-// Styles
-const StyledSetsFiltersForm = styled.div`
-  position: relative;
-`;
-
-// Component
-
-const SetsFiltersForm = ({
-  selectTypeSearchResult,
-  selectBlockchainCategoryResult,
-  selectBlockchainTimeResult,
-  handleNeedShowButtons,
-  handleFiltersCount,
-}: {
-  selectTypeSearchResult: optionType[];
-  selectBlockchainCategoryResult: optionType[];
-  selectBlockchainTimeResult: optionType[];
-  handleNeedShowButtons: (value: boolean) => void;
-  handleFiltersCount: (value: number) => void;
-}) => {
-  const [selectedSearchResult, setSelectedSearchResult] = useState<
-    string | null
-  >(null);
-
-  const [
-    selectedBlockchainCategoryResult,
-    setSelectedBlockchainCategoryResult,
-  ] = useState<string | null>(null);
-
-  const [selectedBlockchainTimeResult, setSelectedBlockchainTimeResult] =
-    useState<string | null>(null);
-
-  useEffect(() => {
-    if (
-      selectedSearchResult ||
-      selectedBlockchainCategoryResult ||
-      selectedBlockchainTimeResult
-    ) {
-      handleNeedShowButtons(true);
-    } else {
-      handleNeedShowButtons(false);
-    }
-
-    const arr = [
-      selectedSearchResult,
-      selectedBlockchainCategoryResult,
-      selectedBlockchainTimeResult,
-    ];
-
-    const count = arr.filter((value) => value).length;
-
-    handleFiltersCount(count);
-  }, [
-    selectedSearchResult,
-    selectedBlockchainCategoryResult,
-    selectedBlockchainTimeResult,
-  ]);
-
-  const handleChangeSearchResult = (value: string | null) => {
-    setSelectedSearchResult(value);
-  };
-
-  const handleChangeBlockchainCategoryResult = (value: string | null) => {
-    setSelectedBlockchainCategoryResult(value);
-  };
-
-  const handleChangeBlockchainTimeResult = (value: string | null) => {
-    setSelectedBlockchainTimeResult(value);
-  };
-
-  return (
-    <StyledSetsFiltersForm>
-      <DropDown caption={'Type'} fallBackOnClose={handleChangeSearchResult}>
-        {selectTypeSearchResult.map((select) => (
-          <BasicRadioInput
-            key={select.id}
-            radioLabel={select.label}
-            radioValue={select.id as unknown as string}
-            handleChange={handleChangeSearchResult}
-            radioChecked={
-              (selectedSearchResult as unknown as number) === select.id
-            }
-          />
-        ))}
-      </DropDown>
-      <DropDown
-        caption={'Category'}
-        fallBackOnClose={handleChangeBlockchainCategoryResult}
-      >
-        {selectBlockchainCategoryResult.map((select) => (
-          <BasicRadioInput
-            key={select.id}
-            radioLabel={select.label}
-            radioValue={select.id as unknown as string}
-            handleChange={handleChangeBlockchainCategoryResult}
-            radioChecked={
-              (selectedSearchResult as unknown as number) === select.id
-            }
-          />
-        ))}
-      </DropDown>
-      <DropDown
-        caption={'Time'}
-        fallBackOnClose={handleChangeBlockchainTimeResult}
-      >
-        {selectBlockchainTimeResult.map((select) => (
-          <BasicRadioInput
-            key={select.id}
-            radioLabel={select.label}
-            radioValue={select.id as unknown as string}
-            handleChange={handleChangeBlockchainTimeResult}
-            radioChecked={
-              (selectedSearchResult as unknown as number) === select.id
-            }
-          />
-        ))}
-      </DropDown>
-    </StyledSetsFiltersForm>
-  );
-};
-// Export
-export default SetsFiltersForm;

package/src/components/forms/form/index.tsx

@@ -1,241 +0,0 @@
-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';
-
-import { InputProps } from '../types';
-
-interface Props {
-  onSubmit: (data: unknown) => void;
-  submitLoading: boolean;
-  formDescription: string;
-  formTitle: string;
-  inputs: InputProps[];
-  initialValues?: { [key: string]: any };
-}
-
-const Title = styled(H1)`
-  margin-bottom: 24px;
-  text-align: center;
-`;
-const Description = styled(MainText)`
-  color: ${TextGrayColor};
-  text-align: justify;
-`;
-
-const Wrapper = styled(Flex)`
-  justify-content: center;
-
-  ${mediaQuery.tablet} {
-    width: 100%;
-    align-items: center;
-    flex-direction: column-reverse;
-    margin: 0;
-  }
-`;
-
-const FormWrapper = styled.form`
-  margin: 0 50px 0 70px;
-  justify-content: center;
-  width: 472px;
-
-  ${mediaQuery.desktop} {
-    margin: 0 25px 0 25px;
-    width: 450px;
-  }
-
-  ${mediaQuery.tablet} {
-    margin: 0;
-    width: 320px;
-  }
-`;
-
-const InputTitle = styled(H5)`
-  margin-bottom: 8px;
-`;
-
-const RadioInput = styled(BasicRadioInput)`
-  color: ${TextGrayColor};
-`;
-
-const StyledInputGroup = styled.div`
-  position: relative;
-  width: 100%;
-  margin-top: 24px;
-`;
-
-const Form = ({ ...props }: Props) => {
-  const {
-    inputs,
-    onSubmit,
-    submitLoading,
-    formDescription,
-    formTitle,
-    initialValues,
-  } = props;
-
-  const {
-    register,
-    formState: { errors, isDirty, isValid },
-    handleSubmit,
-    reset,
-    control,
-    setFocus,
-    formState,
-  } = useForm({
-    mode: 'all',
-    defaultValues: initialValues,
-  });
-
-  useEffect(() => {
-    reset();
-  }, [inputs, reset]);
-
-  useEffect(() => {
-    if (formState.isSubmitSuccessful) {
-      reset();
-    }
-  }, [formState, reset]);
-
-  const getInput = (inputProps: InputProps) => {
-    const dataProp = {
-      labelText: inputProps.label || '',
-      name: inputProps.name,
-      placeHolder: inputProps.placeholder || '',
-    };
-    const inputErrors = errors?.[inputProps.name];
-    const errorProp = {
-      isNeedShowError: Boolean(inputErrors),
-      message: inputErrors ? (inputErrors.message as string) : '',
-    };
-    const registerProp = register(inputProps.name, inputProps.validations);
-
-    switch (inputProps.type) {
-      case 'textArea':
-        return (
-          <BasicTextArea
-            register={registerProp}
-            error={errorProp}
-            data={dataProp}
-            isNeedBiggerArea={false}
-          />
-        );
-      case 'checkbox':
-        return (
-          <>
-            {inputProps.options?.map((option) => {
-              const isCheckboxWithInput = option.value === 'other';
-              const registerTextInput = isCheckboxWithInput
-                ? register(`${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 (
-          <>
-            {inputProps.options?.map((option) => {
-              const isRadioWithInput = option.value === 'other';
-              const registerTextInput = isRadioWithInput
-                ? register(`${inputProps.name}-other-radio`)
-                : undefined;
-              return (
-                <Controller
-                  key={option.desc}
-                  name={inputProps.name}
-                  control={control}
-                  render={({ field }) => (
-                    <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((input) => (
-          <StyledInputGroup key={input.name}>
-            <InputTitle>
-              {input.validations?.required ? '*' : ''}
-              {input.label}
-            </InputTitle>
-            {getInput(input)}
-          </StyledInputGroup>
-        ))}
-
-        <Flex justifyContent="space-between" style={{ marginTop: 44 }}>
-          <MainButton
-            onClick={(e) => e?.currentTarget?.blur()}
-            disabled={!isDirty || !isValid}
-            variant="primaryM"
-            text={submitLoading ? <Spinner variant="light" /> : 'Submit'}
-            type={'submit'}
-          />
-          <MainButton
-            onClick={(e) => e?.currentTarget?.blur()}
-            disabled={!isDirty}
-            variant="secondary"
-            text={submitLoading ? <Spinner variant="light" /> : 'Clear Form'}
-            type={'reset'}
-          />
-        </Flex>
-      </FormWrapper>
-    </Wrapper>
-  );
-};
-
-export default Form;

package/src/components/forms/formsNavigation/index.tsx

@@ -1,165 +0,0 @@
-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';
-
-const NAVIGATION_TABS: { slug: FormsNavigationTabs; label: string }[] = [
-  { 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',
-  },
-];
-
-const StyledFlex = styled(Flex)<{ isOpen: boolean }>`
-  display: none;
-
-  ${mediaQuery.tablet} {
-    cursor: pointer;
-    position: absolute;
-    top: 22px;
-    right: 20px;
-    z-index: 3;
-    display: flex;
-  }
-`;
-
-const Wrapper = styled(Flex)`
-  flex-direction: column;
-  width: 250px;
-
-  ${mediaQuery.tablet} {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    padding-top: 110px;
-    padding-left: 25px;
-    position: fixed;
-    overflow: hidden;
-    transition: transform ease-in-out 300ms;
-    background: ${BackgroundColorLight};
-    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);
-    z-index: 1;
-
-    &.hide {
-      transform: translate(calc(-100% - 20px), 0);
-    }
-
-    &.show {
-      transform: translate(0%, 0%);
-    }
-  }
-`;
-
-const List = styled.ul`
-  margin: 0;
-  padding: 20px 0 0 0;
-  list-style-type: none;
-
-  ${mediaQuery.tablet} {
-    padding-left: 50px;
-  }
-
-  li {
-    margin: 4px 0;
-    padding-left: 5px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 50px;
-    font-size: 15px;
-    cursor: pointer;
-    color: ${TextGrayColor};
-
-    &:hover {
-      background: ${InactiveButtonColor};
-      opacity: 0.9;
-    }
-
-    .link {
-      width: 100%;
-      height: 100%;
-      align-content: center;
-      color: inherit;
-    }
-
-    svg {
-      margin-right: 5px;
-
-      ${mediaQuery.tablet} {
-        margin-right: 15px;
-      }
-    }
-
-    &.activeTab {
-      background: ${InactiveButtonColor};
-      color: ${BlackColor};
-
-      ${mediaQuery.tablet} {
-        background: transparent;
-      }
-    }
-  }
-`;
-
-const FormsNavigation = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const router = useRouter();
-  const activeTab = router?.query?.formId;
-  return (
-    <>
-      <StyledFlex isOpen={isOpen}>
-        {isOpen ? (
-          <BackIcon onClick={() => setIsOpen(false)} />
-        ) : (
-          <MenuIcon onClick={() => setIsOpen(true)} />
-        )}
-      </StyledFlex>
-      <Wrapper className={`mobile_menu ${isOpen ? 'show' : 'hide'}`}>
-        <List>
-          {NAVIGATION_TABS.map((tab) => (
-            <li
-              onClick={() => setIsOpen(false)}
-              key={tab.slug}
-              className={`${activeTab === tab.slug ? 'activeTab' : ''} `}
-            >
-              <Link href={`/forms/${tab.slug}`} className={'link'}>
-                <span>{tab.label}</span>
-              </Link>
-            </li>
-          ))}
-        </List>
-      </Wrapper>
-    </>
-  );
-};
-
-export default FormsNavigation;