WIP

web-app/client/src/components/Chart/ChartControls.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
 import CollapseChartIcon from '@assets/icons/collapse-chart.svg?component';
-import { Text } from '@components/Inputs';
 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/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 { Checkbox } from '@components/Inputs';
 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/DatasetItem/FilePropertiesModal/FilePropertiesModal.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import ModalContainer, { ModalProps } from '@components/ModalContainer';
 import { FilePropsList } from '@components/modals/FilePropertiesModal/tabs/PropertiesTab';
+import ModalContainer, { ModalProps } from '@components/modals/ModalContainer';
 import { AllowedDataset } from 'types/algorithms';
 import styles from './FilePropertiesModal.module.scss';
 

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

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

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

@@ -1,9 +1,9 @@
-import _ from 'lodash';
-import React, { FC } from 'react';
-import { useForm, useFormContext } from 'react-hook-form';
-import { ControlledSelect } from '@components/Inputs/Select';
 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 { OrderDirection, PrimitiveType } from 'types/globalTypes';
 import { FiltersFields } from './Filters';
 

web-app/client/src/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/Inputs';
 import { FormCheckboxProps } from 'types/form';
 
 type CheckboxProps = {

web-app/client/src/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/Inputs';
 import { FormMultiSelectProps } from 'types/form';
 import { OptionWithBadges } from 'types/multiSelect';
 

web-app/client/src/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/Inputs';
 import { FormNumberInputProps } from 'types/form';
 
 type NumberInputProps = {

web-app/client/src/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/Inputs';
 import { FormNumberSliderProps } from 'types/form';
 
 type NumberSliderProps = {

web-app/client/src/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/Inputs';
 import { FormRadioProps } from 'types/form';
 
 type RadioProps = {

web-app/client/src/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/Inputs';
 import { FormSelectProps } from 'types/form';
 import { OptionWithBadges } from 'types/multiSelect';
 

web-app/client/src/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/Inputs';
 import { FormCheckboxProps } from 'types/form';
 
 type TextProps = {

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

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import ListIcon from '@assets/icons/list.svg?component';
-import NavBar from '@components/NavBar';
+import NavBar from '@components/layout/NavBar';
 import Button from '@components/ui-kit/Button';
 import { useAuthContext } from '@hooks/useAuthContext';
 import useModal from '@hooks/useModal';

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

@@ -1,4 +1,4 @@
-import ModalContainer, { ModalProps } from '@components/ModalContainer';
+import ModalContainer, { ModalProps } from '@components/modals/ModalContainer';
 import Button from '@components/ui-kit/Button';
 import { FCWithChildren } from 'types/react';
 import styles from './ListPropertiesModal.module.scss';

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/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 { Radio } from '@components/Inputs';
 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 { Text } from '@components/Inputs';
 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/modals/AuthSuccessModal/AuthSuccessModal.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import ModalContainer, { ModalProps } from '@components/ModalContainer';
+import ModalContainer, { ModalProps } from '@components/modals/ModalContainer';
 import Button from '@components/ui-kit/Button';
 import { useAuthContext } from '@hooks/useAuthContext';
 import styles from './AuthSuccessModal.module.scss';

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

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import ModalContainer, { ModalProps } from '@components/ModalContainer';
 import {
   FilePropsForm,
   FilePropsList,
 } from '@components/modals/FilePropertiesModal/tabs/PropertiesTab';
 import { StatsTab } from '@components/modals/FilePropertiesModal/tabs/StatsTab';
+import ModalContainer, { ModalProps } from '@components/modals/ModalContainer';
 import { Tab, TabView } from '@components/TabView/TabView';
 import { AllowedDataset } from 'types/algorithms';
 import { FileProps } from 'types/globalTypes';

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 { Checkbox, Text } from '@components/Inputs';
-import { ControlledSelect } from '@components/Inputs/Select';
 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/hooks/usePollingControl.ts

@@ -1,5 +1,5 @@
-import { StatsStage } from '@components/FilePropertiesModal/tabs/StatsTab';
 import { useEffect } from 'react';
+import { StatsStage } from '@components/modals/FilePropertiesModal/tabs/StatsTab';
 
 export const usePollingControl = (
   stage: StatsStage | null,

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/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 { 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 { Badge } from '@components/FileStats/Badge';
-import { InputPropsBase } from '@components/Inputs';
-import { Option as CustomOption } from '@components/Inputs/Select/customComponents';
 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 { Select } from '@components/Inputs';
 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 NumberSlider from '@components/Inputs/NumberSlider/NumberSlider';
 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,8 +1,6 @@
 import { useMutation } from '@apollo/client';
-import { FC } from 'react';
-import { useForm } from 'react-hook-form';
-import { Text } from '@components/Inputs';
 import Button from '@components/ui-kit/Button';
+import { Text } from '@components/ui-kit/Inputs';
 import {
   approveRecoveryCode,
   approveRecoveryCodeVariables,
@@ -13,6 +11,8 @@ 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 { Text } from '../../Inputs';
+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,16 +1,16 @@
 import { useMutation } from '@apollo/client';
-import { FC } from 'react';
-import { useForm } from 'react-hook-form';
-import isEmail from 'validator/lib/isEmail';
-import { Text } from '@components/Inputs';
 import Button from '@components/ui-kit/Button';
+import { Text } from '@components/ui-kit/Inputs';
 import {
   logIn,
   logInVariables,
 } from '@graphql/operations/mutations/__generated__/logIn';
 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,16 +1,16 @@
 import { useMutation } from '@apollo/client';
-import { FC } from 'react';
-import { useForm } from 'react-hook-form';
-import isStrongPassword from 'validator/lib/isStrongPassword';
-import { Text } from '@components/Inputs';
 import Button from '@components/ui-kit/Button';
+import { Text } from '@components/ui-kit/Inputs';
 import {
   changePassword,
   changePasswordVariables,
 } from '@graphql/operations/mutations/__generated__/changePassword';
 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,19 +1,19 @@
 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 { Text } from '@components/Inputs';
-import { ControlledSelect } from '@components/Inputs/Select';
 import Button from '@components/ui-kit/Button';
+import { Text } from '@components/ui-kit/Inputs';
+import { ControlledSelect } from '@components/ui-kit/Inputs/Select';
 import {
   createUser,
   createUserVariables,
 } from '@graphql/operations/mutations/__generated__/createUser';
 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,9 +1,7 @@
 import { useMutation } from '@apollo/client';
-import { FC, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
 import { Alert } from '@components/FileStats/Alert';
-import { Text } from '@components/Inputs';
 import Button from '@components/ui-kit/Button';
+import { Text } from '@components/ui-kit/Inputs';
 import {
   approveUserEmail,
   approveUserEmailVariables,
@@ -12,6 +10,8 @@ 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/Inputs/Checkbox/Checkbox.module.scss → web-app/client/src/components/ui-kit/Inputs/Checkbox/Checkbox.module.scss

@@ -47,7 +47,7 @@
 
         &.simple {
           border: none;
-          background: url("../../../assets/icons/check.svg");
+          background: url("../../../../assets/icons/check.svg");
 
           &::after {
             display: none;