WIP

web-app/client/src/components/FormInputs/FormCheckbox.tsx → web-app/client/src/components/AlgorithmFormConfigurator/components/FormInputs/FormCheckbox.tsx

@@ -1,6 +1,6 @@
-import { Checkbox } from '@components/ui-kit/Inputs';
 import _ from 'lodash';
 import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { Checkbox } from '@components/ui-kit/Inputs';
 import { FormCheckboxProps } from 'types/form';
 
 type CheckboxProps = {

web-app/client/src/components/FormInputs/FormMultiSelect.tsx → web-app/client/src/components/AlgorithmFormConfigurator/components/FormInputs/FormMultiSelect.tsx

@@ -1,7 +1,7 @@
-import { InputPropsBase, MultiSelect } from '@components/ui-kit/Inputs';
 import _ from 'lodash';
 import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
 import { Props as ReactSelectProps } from 'react-select/dist/declarations/src';
+import { InputPropsBase, MultiSelect } from '@components/ui-kit/Inputs';
 import { FormMultiSelectProps } from 'types/form';
 import { OptionWithBadges } from 'types/multiSelect';
 

web-app/client/src/components/FormInputs/FormNumberInput.tsx → web-app/client/src/components/AlgorithmFormConfigurator/components/FormInputs/FormNumberInput.tsx

@@ -1,6 +1,6 @@
-import { NumberInput } from '@components/ui-kit/Inputs';
 import _ from 'lodash';
 import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { NumberInput } from '@components/ui-kit/Inputs';
 import { FormNumberInputProps } from 'types/form';
 
 type NumberInputProps = {

web-app/client/src/components/FormInputs/FormNumberSlider.tsx → web-app/client/src/components/AlgorithmFormConfigurator/components/FormInputs/FormNumberSlider.tsx

@@ -1,6 +1,6 @@
-import { NumberSlider } from '@components/ui-kit/Inputs';
 import _ from 'lodash';
 import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { NumberSlider } from '@components/ui-kit/Inputs';
 import { FormNumberSliderProps } from 'types/form';
 
 type NumberSliderProps = {

web-app/client/src/components/FormInputs/FormRadio.tsx → web-app/client/src/components/AlgorithmFormConfigurator/components/FormInputs/FormRadio.tsx

@@ -1,6 +1,6 @@
-import { Radio } from '@components/ui-kit/Inputs';
 import _ from 'lodash';
 import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { Radio } from '@components/ui-kit/Inputs';
 import { FormRadioProps } from 'types/form';
 
 type RadioProps = {

web-app/client/src/components/FormInputs/FormSelect.tsx → web-app/client/src/components/AlgorithmFormConfigurator/components/FormInputs/FormSelect.tsx

@@ -1,6 +1,6 @@
-import { Select } from '@components/ui-kit/Inputs';
 import _ from 'lodash';
 import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { Select } from '@components/ui-kit/Inputs';
 import { FormSelectProps } from 'types/form';
 import { OptionWithBadges } from 'types/multiSelect';
 

web-app/client/src/components/FormInputs/FormText.tsx → web-app/client/src/components/AlgorithmFormConfigurator/components/FormInputs/FormText.tsx

@@ -1,6 +1,6 @@
-import { Text } from '@components/ui-kit/Inputs';
 import _ from 'lodash';
 import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { Text } from '@components/ui-kit/Inputs';
 import { FormCheckboxProps } from 'types/form';
 
 type TextProps = {

web-app/client/src/components/AlgorithmFormConfigurator/useFormFactory.tsx

@@ -18,15 +18,6 @@ import {
 } from 'react-hook-form';
 import { UseControllerProps } from 'react-hook-form/dist/types/controller';
 import { Entries } from 'type-fest';
-import {
-  FormCheckbox,
-  FormMultiSelect,
-  FormNumberInput,
-  FormNumberSlider,
-  FormRadio,
-  FormSelect,
-  FormText,
-} from '@components/FormInputs';
 import {
   CUSTOM_PRESET_INDEX,
   DEFAULT_PRESET_INDEX,
@@ -55,6 +46,15 @@ import {
   Presets,
 } from 'types/form';
 import { IntersectionMainTaskProps } from 'types/globalTypes';
+import {
+  FormCheckbox,
+  FormMultiSelect,
+  FormNumberInput,
+  FormNumberSlider,
+  FormRadio,
+  FormSelect,
+  FormText,
+} from './components/FormInputs';
 
 type FormFactoryProps<T extends UsedPrimitivesType> = {
   fileID: string;

web-app/client/src/components/ClusterOptions/ClusterOptions.tsx

@@ -1,8 +1,8 @@
+import cn from 'classnames';
+import { Dispatch, FC, SetStateAction, useState } from 'react';
 import ThreeDotsIcon from '@assets/icons/three-dots.svg?component';
 import Button from '@components/ui-kit/Button';
 import { Checkbox } from '@components/ui-kit/Inputs';
-import cn from 'classnames';
-import { Dispatch, FC, SetStateAction, useState } from 'react';
 import styles from './ClusterOptions.module.scss';
 
 interface Props {

web-app/client/src/components/Filters/FilteringWindow.tsx

@@ -1,7 +1,7 @@
-import ListPropertiesModal from '@components/ListPropertiesModal';
-import { Checkbox } from '@components/ui-kit/Inputs';
 import { FC, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
+import ListPropertiesModal from '@components/ListPropertiesModal';
+import { Checkbox } from '@components/ui-kit/Inputs';
 
 type FilteringProps = {
   setIsFilteringShown: (arg: boolean) => void;

web-app/client/src/components/Filters/OrderingWindow.tsx

@@ -1,9 +1,9 @@
-import ListPropertiesModal from '@components/ListPropertiesModal';
-import { ControlledSelect } from '@components/ui-kit/Inputs/Select';
-import { OrderingTitles } from '@constants/titles';
 import _ from 'lodash';
 import { FC } from 'react';
 import { useForm, useFormContext } from 'react-hook-form';
+import ListPropertiesModal from '@components/ListPropertiesModal';
+import { ControlledSelect } from '@components/ui-kit/Inputs/Select';
+import { OrderingTitles } from '@constants/titles';
 import { OrderDirection, PrimitiveType } from 'types/globalTypes';
 import { FiltersFields } from './Filters';
 

web-app/client/src/components/PresetSelector/PresetSelector.tsx

@@ -1,7 +1,7 @@
-import { Select } from '@components/ui-kit/Inputs';
-import { FormObjectsType } from '@constants/formPrimitives';
 import { useEffect, useMemo } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
+import { Select } from '@components/ui-kit/Inputs';
+import { FormObjectsType } from '@constants/formPrimitives';
 import { OptionWithBadges } from 'types/multiSelect';
 
 type PresetSelectorProps = {

web-app/client/src/components/PrimitiveCard/PrimitiveCard.tsx

@@ -1,8 +1,8 @@
+import cn from 'classnames';
+import { FC, FormEvent } from 'react';
 import PrimitiveDescription from '@components/PrimitiveDescription';
 import { Radio } from '@components/ui-kit/Inputs';
 import { PrimitiveInfoType } from '@constants/primitiveInfoType';
-import cn from 'classnames';
-import { FC, FormEvent } from 'react';
 import styles from './PrimitiveCard.module.scss';
 
 interface Props {

web-app/client/src/components/TabLayout/TabLayout.tsx

@@ -1,14 +1,14 @@
 import { DocumentNode, useLazyQuery } from '@apollo/client';
+import { useRouter } from 'next/router';
+import { FC, ReactNode, useEffect, useMemo, useState } from 'react';
+import { DefaultValues, FormProvider, useForm } from 'react-hook-form';
+import { Subscription } from 'react-hook-form/dist/utils/createSubject';
 import FilterIcon from '@assets/icons/filter.svg?component';
 import OrderingIcon from '@assets/icons/ordering.svg?component';
 import PaginationComponent from '@components/Pagination';
 import Button from '@components/ui-kit/Button';
 import { Text } from '@components/ui-kit/Inputs';
 import useFormPersist, { StorageToValues } from '@hooks/useFormPersist';
-import { useRouter } from 'next/router';
-import { FC, ReactNode, useEffect, useMemo, useState } from 'react';
-import { DefaultValues, FormProvider, useForm } from 'react-hook-form';
-import { Subscription } from 'react-hook-form/dist/utils/createSubject';
 import { OrderDirection, Pagination } from 'types/globalTypes';
 import styles from './TabLayout.module.scss';
 

web-app/client/src/components/Layout/Layout.tsx → web-app/client/src/components/layout/Layout/Layout.tsx

@@ -1,13 +1,13 @@
-const MobileBanner = dynamic(() => import('@components/MobileBanner'), {
+const MobileBanner = dynamic(() => import('./components/MobileBanner'), {
   ssr: false,
 });
 
 import { useAtom } from 'jotai';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import visibleModalsAtom from '@atoms/visibleModalsAtom';
-import Header from '@components/Header';
 import { FCWithChildren } from 'types/react';
+import Header from './components/Header';
 import styles from './Layout.module.scss';
 
 const Layout: FCWithChildren = ({ children }) => {

web-app/client/src/components/modals/FilePropertiesModal/tabs/PropertiesTab.tsx

@@ -1,14 +1,14 @@
 import { useQuery } from '@apollo/client';
+import _ from 'lodash';
+import { FC, useEffect, useMemo } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import Button from '@components/ui-kit/Button';
 import { Checkbox, Text } from '@components/ui-kit/Inputs';
 import { ControlledSelect } from '@components/ui-kit/Inputs/Select';
 import delimiterNames from '@constants/delimiterNames';
 import { getAlgorithmsConfig } from '@graphql/operations/queries/__generated__/getAlgorithmsConfig';
 import { GET_ALGORITHMS_CONFIG } from '@graphql/operations/queries/getAlgorithmsConfig';
 import { useTaskUrlParams } from '@hooks/useTaskUrlParams';
-import _ from 'lodash';
-import { FC, useEffect, useMemo } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
 import { AllowedDataset } from 'types/algorithms';
 import {
   FileProps,

web-app/client/src/components/modals/FilePropertiesModal/tabs/StatsTab/stages/Menu.tsx

@@ -1,6 +1,6 @@
-import { InputPropsBase } from '@components/ui-kit/Inputs';
 import { ComponentType } from 'react';
 import { MenuProps } from 'react-select';
+import { InputPropsBase } from '@components/ui-kit/Inputs';
 import styles from '../StatsTab.module.scss';
 
 export const Menu: ComponentType<MenuProps & InputPropsBase> = ({

web-app/client/src/components/modals/FilePropertiesModal/tabs/StatsTab/stages/Option.tsx

@@ -1,8 +1,8 @@
+import { ComponentType } from 'react';
+import { OptionProps } from 'react-select';
 import { Badge } from '@components/FileStats/Badge';
 import { InputPropsBase } from '@components/ui-kit/Inputs';
 import { Option as CustomOption } from '@components/ui-kit/Inputs/Select/customComponents';
-import { ComponentType } from 'react';
-import { OptionProps } from 'react-select';
 import { ColumnOption } from 'types/fileStats';
 import styles from '../StatsTab.module.scss';
 

web-app/client/src/components/modals/FilePropertiesModal/tabs/StatsTab/stages/ShowStage.tsx

@@ -1,9 +1,9 @@
+import { useRouter } from 'next/router';
+import { FC, useState } from 'react';
 import { ColumnCard } from '@components/FileStats/ColumnCard';
 import Button from '@components/ui-kit/Button';
 import { Select } from '@components/ui-kit/Inputs';
 import { getFileStats_datasetInfo } from '@graphql/operations/queries/__generated__/getFileStats';
-import { useRouter } from 'next/router';
-import { FC, useState } from 'react';
 import { ColumnOption } from 'types/fileStats';
 import styles from '../StatsTab.module.scss';
 import { Menu } from './Menu';

web-app/client/src/components/modals/FilePropertiesModal/tabs/StatsTab/stages/StartStage.tsx

@@ -1,7 +1,7 @@
+import { FC, useState } from 'react';
 import { Alert } from '@components/FileStats/Alert';
 import Button from '@components/ui-kit/Button';
 import NumberSlider from '@components/ui-kit/Inputs/NumberSlider/NumberSlider';
-import { FC, useState } from 'react';
 import styles from '../StatsTab.module.scss';
 import { Stage } from './Stage';
 

web-app/client/src/components/modals/LogInModal/steps/Code.tsx

@@ -1,4 +1,6 @@
 import { useMutation } from '@apollo/client';
+import { FC } from 'react';
+import { useForm } from 'react-hook-form';
 import Button from '@components/ui-kit/Button';
 import { Text } from '@components/ui-kit/Inputs';
 import {
@@ -11,8 +13,6 @@ import {
 } from '@graphql/operations/mutations/__generated__/issueCodeForPasswordRecovery';
 import { APPROVE_RECOVERY_CODE } from '@graphql/operations/mutations/approveRecoveryCode';
 import { ISSUE_CODE_FOR_PASSWORD_RECOVERY } from '@graphql/operations/mutations/issueCodeForPasswordRecovery';
-import { FC } from 'react';
-import { useForm } from 'react-hook-form';
 import styles from '../LogInModal.module.scss';
 
 type Inputs = {

web-app/client/src/components/modals/LogInModal/steps/Email.tsx

@@ -1,15 +1,15 @@
 import { useMutation } from '@apollo/client';
 import { Dispatch, FC, SetStateAction, useEffect } from 'react';
 
+import { useForm } from 'react-hook-form';
+import isEmail from 'validator/lib/isEmail';
 import Button from '@components/ui-kit/Button';
 import { Text } from '@components/ui-kit/Inputs';
 import {
   issueCodeForPasswordRecovery,
   issueCodeForPasswordRecoveryVariables,
 } from '@graphql/operations/mutations/__generated__/issueCodeForPasswordRecovery';
 import { ISSUE_CODE_FOR_PASSWORD_RECOVERY } from '@graphql/operations/mutations/issueCodeForPasswordRecovery';
-import { useForm } from 'react-hook-form';
-import isEmail from 'validator/lib/isEmail';
 import styles from '../LogInModal.module.scss';
 
 type Inputs = {

web-app/client/src/components/modals/LogInModal/steps/LogIn.tsx

@@ -1,4 +1,7 @@
 import { useMutation } from '@apollo/client';
+import { FC } from 'react';
+import { useForm } from 'react-hook-form';
+import isEmail from 'validator/lib/isEmail';
 import Button from '@components/ui-kit/Button';
 import { Text } from '@components/ui-kit/Inputs';
 import {
@@ -8,9 +11,6 @@ import {
 import { LOG_IN } from '@graphql/operations/mutations/logIn';
 import { useAuthContext } from '@hooks/useAuthContext';
 import hashPassword from '@utils/hashPassword';
-import { FC } from 'react';
-import { useForm } from 'react-hook-form';
-import isEmail from 'validator/lib/isEmail';
 import styles from '../LogInModal.module.scss';
 
 type Inputs = {

web-app/client/src/components/modals/LogInModal/steps/Password.tsx

@@ -1,4 +1,7 @@
 import { useMutation } from '@apollo/client';
+import { FC } from 'react';
+import { useForm } from 'react-hook-form';
+import isStrongPassword from 'validator/lib/isStrongPassword';
 import Button from '@components/ui-kit/Button';
 import { Text } from '@components/ui-kit/Inputs';
 import {
@@ -8,9 +11,6 @@ import {
 import { CHANGE_PASSWORD } from '@graphql/operations/mutations/changePassword';
 import { useAuthContext } from '@hooks/useAuthContext';
 import hashPassword from '@utils/hashPassword';
-import { FC } from 'react';
-import { useForm } from 'react-hook-form';
-import isStrongPassword from 'validator/lib/isStrongPassword';
 import styles from '../LogInModal.module.scss';
 
 type Inputs = {

web-app/client/src/components/modals/SignUpModal/steps/CoreInfo.tsx

@@ -1,4 +1,9 @@
 import { useMutation } from '@apollo/client';
+import { countries } from 'countries-list';
+import { FC } from 'react';
+import { useForm } from 'react-hook-form';
+import isEmail from 'validator/lib/isEmail';
+import isStrongPassword from 'validator/lib/isStrongPassword';
 import Button from '@components/ui-kit/Button';
 import { Text } from '@components/ui-kit/Inputs';
 import { ControlledSelect } from '@components/ui-kit/Inputs/Select';
@@ -9,11 +14,6 @@ import {
 import { CREATE_USER } from '@graphql/operations/mutations/createUser';
 import { useAuthContext } from '@hooks/useAuthContext';
 import hashPassword from '@utils/hashPassword';
-import { countries } from 'countries-list';
-import { FC } from 'react';
-import { useForm } from 'react-hook-form';
-import isEmail from 'validator/lib/isEmail';
-import isStrongPassword from 'validator/lib/isStrongPassword';
 import styles from '../../LogInModal/LogInModal.module.scss';
 
 const countryNames = Object.entries(countries).map(([, country]) => country);

web-app/client/src/components/modals/SignUpModal/steps/EmailVerification.tsx

@@ -1,4 +1,6 @@
 import { useMutation } from '@apollo/client';
+import { FC, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 import { Alert } from '@components/FileStats/Alert';
 import Button from '@components/ui-kit/Button';
 import { Text } from '@components/ui-kit/Inputs';
@@ -10,8 +12,6 @@ import { issueVerificationCode } from '@graphql/operations/mutations/__generated
 import { APPROVE_USER_EMAIL } from '@graphql/operations/mutations/approveUserEmail';
 import { ISSUE_VERIFICATION_CODE } from '@graphql/operations/mutations/issueVerificationCode';
 import { useAuthContext } from '@hooks/useAuthContext';
-import { FC, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
 import styles from '../../LogInModal/LogInModal.module.scss';
 
 type Inputs = {

web-app/client/src/components/Chart/ChartControls.tsx → web-app/client/src/components/ui-kit/Chart/ChartControls.tsx

@@ -1,7 +1,7 @@
+import { FC } from 'react';
 import CollapseChartIcon from '@assets/icons/collapse-chart.svg?component';
 import Button from '@components/ui-kit/Button';
 import { Text } from '@components/ui-kit/Inputs';
-import { FC } from 'react';
 import styles from './ChartControls.module.scss';
 
 type Props = {

web-app/client/src/components/ui-kit/Inputs/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
-import { InputPropsBase } from '@components/ui-kit/Inputs';
 import cn from 'classnames';
 import { forwardRef, ForwardRefRenderFunction, HTMLProps } from 'react';
+import { InputPropsBase } from '@components/ui-kit/Inputs';
 import styles from './Checkbox.module.scss';
 
 type CheckboxProps = {

web-app/client/src/components/ui-kit/Inputs/DateTime/DateTime.tsx

@@ -1,7 +1,3 @@
-import CalendarIcon from '@assets/icons/calendar.svg?component';
-import OutsideClickObserver from '@components/OutsideClickObserver';
-import Tooltip from '@components/Tooltip';
-import { InputPropsBase } from '@components/ui-kit/Inputs';
 import cn from 'classnames';
 import {
   ChangeEventHandler,
@@ -15,6 +11,10 @@ import {
   useState,
 } from 'react';
 import ReactDateTime from 'react-datetime';
+import CalendarIcon from '@assets/icons/calendar.svg?component';
+import OutsideClickObserver from '@components/OutsideClickObserver';
+import Tooltip from '@components/Tooltip';
+import { InputPropsBase } from '@components/ui-kit/Inputs';
 import 'react-datetime/css/react-datetime.css';
 import styles from './DateTime.module.scss';
 // eslint-disable-next-line import/order

web-app/client/src/components/ui-kit/Inputs/MultiSelect/MultiSelect.tsx

@@ -1,5 +1,3 @@
-import Tooltip from '@components/Tooltip';
-import { InputPropsBase } from '@components/ui-kit/Inputs';
 import cn from 'classnames';
 import {
   ForwardedRef,
@@ -8,6 +6,8 @@ import {
   ReactNode,
 } from 'react';
 import ReactSelect, { Props as ReactSelectProps } from 'react-select';
+import Tooltip from '@components/Tooltip';
+import { InputPropsBase } from '@components/ui-kit/Inputs';
 import { Option } from 'types/inputs';
 import customComponents, { colorStyles } from './customComponents';
 import styles from './MultiSelect.module.scss';