@redneckz/wildless-cms-uni-blocks 0.14.988 → 0.14.990

package/mobile/src/ui-kit/FormField/Fields/InternshipStartDateField.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { isDateValid } from '../../../utils/isDateValid';
+import { DatePickerControl } from '../../DatePicker/DatePickerControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+const INTERNSHIP_START_DATE_ERROR = 'Некорректно заполненное поле';
+
+export const InternshipStartDateField = JSX<CustomFieldProps>(({ field, input }) => {
+  const [endDate, setEndDate] = useState<Date>();
+  const [internshipStartDateError, setInternshipStartDateError] = useState('');
+  const [internshipStartDateValue, setInternshipStartDateValue] = useState<Date>();
+
+  useEffect(() => {
+    setEndDate(field('internshipEndDate').value as Date);
+  }, [field('internshipEndDate').value]);
+
+  const handleInputChange = (value: Date) => {
+    setInternshipStartDateValue(value);
+    field(input?.name ?? '')?.onChange?.(value);
+    setInternshipStartDateError(
+      isDateValid(value, { maxLimit: endDate }) ? '' : INTERNSHIP_START_DATE_ERROR,
+    );
+  };
+
+  return (
+    <DatePickerControl
+      label={input?.label || 'Дата начала практики'}
+      {...field(input?.name ?? '')}
+      {...input}
+      value={internshipStartDateValue}
+      error={internshipStartDateError || field(input?.name ?? '')?.error}
+      errors={[internshipStartDateError ?? field(input?.name ?? '')?.error]}
+      onChange={handleInputChange}
+      maxDate={endDate}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/SelectField.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type Option } from '../../Select/Option';
+import { SelectControl } from '../../Select/SelectControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export interface SelectFieldProps extends CustomFieldProps {
+  options: Option[];
+}
+
+export const SelectField = JSX<SelectFieldProps>(({ field, input, label, options }) => (
+  <SelectControl label={label} options={options} {...field(input?.name ?? '')} {...input} />
+));

package/mobile/src/ui-kit/FormField/Fields/TextField.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const TextField = JSX<CustomFieldProps>(({ field, input, label }) => (
+  <InputControl label={label} maxLength={60} {...field(input?.name ?? '')} {...input} />
+));

package/mobile/src/ui-kit/FormField/InputsMap.tsx

@@ -0,0 +1,133 @@
+import type { FormTypeFieldDef } from '../../model/FormTypeFieldDef';
+import { EDUCATION_LEVEL, INTERNSHIP_DIRECTION, WORKING_HOURS } from './constants';
+import type { CustomFieldProps } from './CustomFieldProps';
+import { AcquiringField } from './Fields/AcquiringField';
+import { AddressBranchField } from './Fields/AddressBranchField';
+import { AmountField } from './Fields/AmountField';
+import { AnnualRevenueField } from './Fields/AnnualRevenueField';
+import { ApplicationDateField } from './Fields/ApplicationDateField';
+import { ApplierTypeField } from './Fields/ApplierTypeField';
+import { AverageGradeField } from './Fields/AverageGradeField';
+import { BankEmpoleeField } from './Fields/BankEmpoleeField';
+import { BirthdayField } from './Fields/BirthdayField';
+import { CallbackTimeField } from './Fields/CallbackTimeField';
+import { CollectionCountField } from './Fields/CollectionCountField';
+import { CommentField } from './Fields/CommentField';
+import { DadataPartySelectField } from './Fields/DadataPartySelectField';
+import { DesiredMeetingDateField } from './Fields/DesiredMeetingDateField';
+import { EmailField } from './Fields/EmailField';
+import { FeedbackMethodField } from './Fields/FeedbackMethodField';
+import { FileUploadField } from './Fields/FileUpload';
+import { FullNameField } from './Fields/FullNameField';
+import { FullRegionField } from './Fields/FullRegionField';
+import { InnField } from './Fields/InnField';
+import { InternshipEndDateField } from './Fields/InternshipEndDateField';
+import { InternshipStartDateField } from './Fields/InternshipStartDateField';
+import { IsClientField } from './Fields/IsClientField';
+import { LocalitiesField } from './Fields/LocalitiesField';
+import { MiddleNameField } from './Fields/MiddleNameField';
+import { NameField } from './Fields/NameField';
+import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
+import { PartnerCommentsField } from './Fields/PartnerCommentsField';
+import { PartnerNameField } from './Fields/PartnerNameField';
+import { PartnerSymbolCodeField } from './Fields/PartnerSymbolCodeField';
+import { PhoneField } from './Fields/PhoneField';
+import { PosTerminalField } from './Fields/PosTerminalField';
+import { ProductField } from './Fields/ProductField';
+import { QuestionProductField } from './Fields/QuestionProductField';
+import { RegionField } from './Fields/RegionField';
+import { RepresentativeNameField } from './Fields/RepresentativeNameField';
+import { SecondaryPhoneField } from './Fields/SecondaryPhoneField';
+import { SelectField, type SelectFieldProps } from './Fields/SelectField';
+import { ServiceDirectionField } from './Fields/ServiceDirectionField';
+import { SituationDescriptionField } from './Fields/SituationDescriptionField';
+import { SufferedFromField } from './Fields/SufferedFromField';
+import { SurnameField } from './Fields/SurnameField';
+import { TermField } from './Fields/TermField';
+import { TextField } from './Fields/TextField';
+import { UltraPremiumField } from './Fields/UltraPremiumField';
+import { VedField } from './Fields/VedField';
+import { ConsentToReceiveMaterialsField } from './Fields/СonsentToReceiveMaterialsField';
+import { getPremium } from './getPremium';
+
+const PRODUCT_REF = {
+  $ref: '/wcms-resources/outservice-productlist.json',
+};
+
+const AGENTS_REF = {
+  $ref: '/wcms-resources/agenty-dlya-rko.json',
+};
+
+export const InputsMap = {
+  fullName: FullNameField,
+  addressBranch: AddressBranchField,
+  desiredMeetingDate: DesiredMeetingDateField,
+  product: (props: CustomFieldProps) => <ProductField {...props} source={PRODUCT_REF} />,
+  localities: LocalitiesField,
+  isClient: IsClientField,
+  partnerComments: PartnerCommentsField,
+  collectionCount: CollectionCountField,
+  acquiringType: AcquiringField,
+  onlineCheckout: OnlineCheckoutField,
+  posTerminal: PosTerminalField,
+  serviceType: UltraPremiumField,
+  term: TermField,
+  amount: AmountField,
+  annualRevenue: AnnualRevenueField,
+  vedTypes: VedField,
+  feedbackMethod: FeedbackMethodField,
+  serviceDirection: ServiceDirectionField,
+  bankEmpolee: BankEmpoleeField,
+  secondaryPhone: SecondaryPhoneField,
+  applicationDate: ApplicationDateField,
+  region: (props: CustomFieldProps) =>
+    getPremium(props?.params?.typeForm as FormTypeFieldDef) ? (
+      <FullRegionField {...props} />
+    ) : (
+      <RegionField {...props} />
+    ),
+  consentToReceiveMaterials: ConsentToReceiveMaterialsField,
+  sufferedFrom: SufferedFromField,
+  situationDescription: SituationDescriptionField,
+  representativeName: RepresentativeNameField,
+  applierType: ApplierTypeField,
+  surname: SurnameField,
+  name: NameField,
+  middleName: MiddleNameField,
+  birthday: BirthdayField,
+  phone: PhoneField,
+  email: EmailField,
+  inn: InnField,
+  comment: CommentField,
+  fullRegion: FullRegionField,
+  partnerSymbolCode: (props: CustomFieldProps) => (
+    <PartnerSymbolCodeField {...props} source={AGENTS_REF} />
+  ),
+  partnerName: (props: CustomFieldProps) => <PartnerNameField {...props} source={AGENTS_REF} />,
+  dadataPartyNameSelect: DadataPartySelectField,
+  dadataPartyInnSelect: DadataPartySelectField,
+  questionProduct: QuestionProductField,
+  callbackTime: CallbackTimeField,
+  russianPhone: PhoneField,
+  cityOfResidence: (props: CustomFieldProps) => <TextField {...props} label="Город проживания" />,
+  internshipStartDate: InternshipStartDateField,
+  internshipEndDate: InternshipEndDateField,
+  university: (props: CustomFieldProps) => <TextField {...props} label="ВУЗ" />,
+  courseYear: (props: CustomFieldProps) => <TextField {...props} label="Курс" />,
+  graduationYear: (props: CustomFieldProps) => <TextField {...props} label="Год окончания" />,
+  fieldOfStudy: (props: CustomFieldProps) => <TextField {...props} label="Направление обучения" />,
+  educationLevel: (props: SelectFieldProps) => (
+    <SelectField {...props} label="Ступень обучения" options={EDUCATION_LEVEL} />
+  ),
+  averageGrade: AverageGradeField,
+  skillsAndKnowledge: CommentField,
+  workExperience: CommentField,
+  motivationForInternship: CommentField,
+  internshipDirection: (props: SelectFieldProps) => (
+    <SelectField {...props} label="Направление стажировки" options={INTERNSHIP_DIRECTION} />
+  ),
+  workingHours: (props: SelectFieldProps) => (
+    <SelectField {...props} label="Количество рабочих часов" options={WORKING_HOURS} />
+  ),
+  fileUpload: FileUploadField,
+};

package/mobile/src/ui-kit/FormField/NameFieldDef.ts

@@ -45,5 +45,21 @@ type NameFieldApplicationDef =
   | 'dadataPartyInnSelect'
   | 'questionProduct'
   | 'callbackTime'
-  | 'russianPhone';
+  | 'russianPhone'
+  | 'cityOfResidence'
+  | 'internshipStartDate'
+  | 'internshipEndDate'
+  | 'university'
+  | 'fieldOfStudy'
+  | 'courseYear'
+  | 'graduationYear'
+  | 'averageGrade'
+  | 'skillsAndKnowledge'
+  | 'educationLevel'
+  | 'workingHours'
+  | 'motivationForInternship'
+  | 'workExperience'
+  | 'internshipDirection'
+  | 'fileUpload'
+  | 'fileId';
 export type NameFieldDef = NameFieldApplicationDef;

package/mobile/src/ui-kit/FormField/constants.tsx

@@ -97,3 +97,32 @@ export const VED_TYPES: RadioButtonItem[] = [
   { id: 'conversionTransactions', text: 'Конверсионные операции' },
   { id: 'otherIssues', text: 'Иные вопросы ВЭД' },
 ];
+
+export const INTERNSHIP_DIRECTION: Option[] = [
+  { key: 'economics', text: 'Экономика и финансы' },
+  { key: 'audit', text: 'Аудит' },
+  { key: 'law', text: 'Юриспруденция' },
+  { key: 'it', text: 'ИТ' },
+  { key: 'marketing', text: 'Маркетинг' },
+  { key: 'hr', text: 'HR' },
+  { key: 'analytics', text: 'Аналитика' },
+  { key: 'management', text: 'Менеджмент' },
+  { key: 'administration', text: 'ГМУ' },
+  { key: 'design', text: 'Дизайн' },
+  { key: 'journalism', text: 'Журналистика' },
+  { key: 'contact', text: 'Контакт-центр' },
+  { key: 'other', text: 'Другое' },
+];
+
+export const WORKING_HOURS: Option[] = [
+  { key: '20', text: '20' },
+  { key: '30', text: '30' },
+  { key: '40', text: '40' },
+];
+
+export const EDUCATION_LEVEL: Option[] = [
+  { key: 'bachelor', text: 'Бакалавриат' },
+  { key: 'specialist', text: 'Специалитет' },
+  { key: 'master', text: 'Магистратура' },
+  { key: 'doctorate', text: 'Аспирантура' },
+];

package/mobile/src/ui-kit/FormField/getField.tsx

@@ -1,114 +1,10 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
-import { type FormTypeFieldDef } from '../../model/FormTypeFieldDef';
 import { type VNode } from '../../model/VNode';
 import { type BaseFieldDef } from './BaseFieldDef';
-import { type CustomFieldProps } from './CustomFieldProps';
-import { AcquiringField } from './Fields/AcquiringField';
-import { AddressBranchField } from './Fields/AddressBranchField';
-import { AmountField } from './Fields/AmountField';
-import { AnnualRevenueField } from './Fields/AnnualRevenueField';
-import { ApplicationDateField } from './Fields/ApplicationDateField';
-import { ApplierTypeField } from './Fields/ApplierTypeField';
-import { BankEmpoleeField } from './Fields/BankEmpoleeField';
-import { BirthdayField } from './Fields/BirthdayField';
-import { CallbackTimeField } from './Fields/CallbackTimeField';
-import { CollectionCountField } from './Fields/CollectionCountField';
-import { CommentField } from './Fields/CommentField';
-import { DadataPartySelectField } from './Fields/DadataPartySelectField';
-import { DesiredMeetingDateField } from './Fields/DesiredMeetingDateField';
-import { EmailField } from './Fields/EmailField';
-import { FeedbackMethodField } from './Fields/FeedbackMethodField';
-import { FullNameField } from './Fields/FullNameField';
-import { FullRegionField } from './Fields/FullRegionField';
-import { InnField } from './Fields/InnField';
-import { IsClientField } from './Fields/IsClientField';
-import { LocalitiesField } from './Fields/LocalitiesField';
-import { MiddleNameField } from './Fields/MiddleNameField';
-import { NameField } from './Fields/NameField';
-import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
-import { PartnerCommentsField } from './Fields/PartnerCommentsField';
-import { PartnerNameField } from './Fields/PartnerNameField';
-import { PartnerSymbolCodeField } from './Fields/PartnerSymbolCodeField';
-import { PhoneField } from './Fields/PhoneField';
-import { PosTerminalField } from './Fields/PosTerminalField';
-import { ProductField } from './Fields/ProductField';
-import { QuestionProductField } from './Fields/QuestionProductField';
-import { RegionField } from './Fields/RegionField';
-import { RepresentativeNameField } from './Fields/RepresentativeNameField';
-import { SecondaryPhoneField } from './Fields/SecondaryPhoneField';
-import { ServiceDirectionField } from './Fields/ServiceDirectionField';
-import { SituationDescriptionField } from './Fields/SituationDescriptionField';
-import { SufferedFromField } from './Fields/SufferedFromField';
-import { SurnameField } from './Fields/SurnameField';
-import { TermField } from './Fields/TermField';
-import { UltraPremiumField } from './Fields/UltraPremiumField';
-import { VedField } from './Fields/VedField';
-import { ConsentToReceiveMaterialsField } from './Fields/СonsentToReceiveMaterialsField';
-import { getPremium } from './getPremium';
+import { InputsMap } from './InputsMap';
 import { RefWrapper } from './RefWrapper';
 import { shouldRenderField } from './shouldRenderField';
 
-const PRODUCT_REF = {
-  $ref: '/wcms-resources/outservice-productlist.json',
-};
-
-const AGENTS_REF = {
-  $ref: '/wcms-resources/agenty-dlya-rko.json',
-};
-
-const InputsMap = {
-  fullName: FullNameField,
-  addressBranch: AddressBranchField,
-  desiredMeetingDate: DesiredMeetingDateField,
-  product: (props: CustomFieldProps) => <ProductField {...props} source={PRODUCT_REF} />,
-  localities: LocalitiesField,
-  isClient: IsClientField,
-  partnerComments: PartnerCommentsField,
-  collectionCount: CollectionCountField,
-  acquiringType: AcquiringField,
-  onlineCheckout: OnlineCheckoutField,
-  posTerminal: PosTerminalField,
-  serviceType: UltraPremiumField,
-  term: TermField,
-  amount: AmountField,
-  annualRevenue: AnnualRevenueField,
-  vedTypes: VedField,
-  feedbackMethod: FeedbackMethodField,
-  serviceDirection: ServiceDirectionField,
-  bankEmpolee: BankEmpoleeField,
-  secondaryPhone: SecondaryPhoneField,
-  applicationDate: ApplicationDateField,
-  region: (props: CustomFieldProps) =>
-    getPremium(props?.params?.typeForm as FormTypeFieldDef) ? (
-      <FullRegionField {...props} />
-    ) : (
-      <RegionField {...props} />
-    ),
-  consentToReceiveMaterials: ConsentToReceiveMaterialsField,
-  sufferedFrom: SufferedFromField,
-  situationDescription: SituationDescriptionField,
-  representativeName: RepresentativeNameField,
-  applierType: ApplierTypeField,
-  surname: SurnameField,
-  name: NameField,
-  middleName: MiddleNameField,
-  birthday: BirthdayField,
-  phone: PhoneField,
-  email: EmailField,
-  inn: InnField,
-  comment: CommentField,
-  fullRegion: FullRegionField,
-  partnerSymbolCode: (props: CustomFieldProps) => (
-    <PartnerSymbolCodeField {...props} source={AGENTS_REF} />
-  ),
-  partnerName: (props: CustomFieldProps) => <PartnerNameField {...props} source={AGENTS_REF} />,
-  dadataPartyNameSelect: DadataPartySelectField,
-  dadataPartyInnSelect: DadataPartySelectField,
-  questionProduct: QuestionProductField,
-  callbackTime: CallbackTimeField,
-  russianPhone: PhoneField,
-};
-
 export const getField =
   <F extends BaseFieldDef>(
     field: FormFieldRegisterer<any>,

package/mobile/src/ui-kit/FormField/getObjectValidator.tsx

@@ -3,6 +3,7 @@ import { type Validator } from '../../validation/validator';
 import { type BaseFieldDef } from './BaseFieldDef';
 import {
   agreementValidator,
+  birthdayValidator,
   defaultSelectValidator,
   defaultValidator,
   emailValidator,
@@ -34,7 +35,7 @@ export const validatorObj: Record<string, Validator> = {
   surname: nameValidator('Укажите свою фамилию на кириллице'),
   name: nameValidator('Укажите своё имя на кириллице (без сокращений)'),
   middleName: nameValidator('Укажите своё отчество на кириллице'),
-  birthday: defaultValidator('Укажите дату рождения'),
+  birthday: birthdayValidator('Укажите дату рождения'),
   phone: phoneValidator('Укажите номер телефона'),
   email: emailValidator('Укажите электронную почту'),
   inn: innValidator('Укажите ИНН'),
@@ -48,6 +49,20 @@ export const validatorObj: Record<string, Validator> = {
   callbackTime: defaultValidator(),
   questionProduct: defaultValidator(),
   russianPhone: russianPhoneValidator('Укажите номер телефона'),
+  cityOfResidence: defaultValidator(),
+  internshipStartDate: defaultValidator(),
+  internshipEndDate: defaultValidator(),
+  university: defaultValidator(),
+  fieldOfStudy: defaultValidator(),
+  courseYear: defaultValidator(),
+  graduationYear: defaultValidator(),
+  averageGrade: defaultValidator(),
+  skillsAndKnowledge: defaultValidator(),
+  educationLevel: defaultSelectValidator(),
+  motivationForInternship: defaultValidator(),
+  workExperience: defaultValidator(),
+  internshipDirection: defaultValidator(),
+  workingHours: defaultValidator(),
 };
 
 export const getFormValidator = <FormState extends Record<string, any>, F extends BaseFieldDef>(

package/mobile/src/ui-kit/FormField/validators.ts

@@ -1,4 +1,5 @@
 import { isCyrillic } from '../../utils/isCyrilic';
+import { isDateValid } from '../../utils/isDateValid';
 import { required } from '../../validation/required';
 import { validator } from '../../validation/validator';
 
@@ -51,3 +52,6 @@ export const emailValidator = (errorMsg: string) =>
 
 export const isValidInnLength = (value: string | undefined): boolean =>
   typeof value === 'string' && (value.length === 10 || value.length === 12);
+
+export const birthdayValidator = (errorMsg: string) =>
+  validator((_: Date) => isDateValid(_, { maxLimit: new Date() }))(errorMsg);

package/mobile/src/ui-kit/Input/Input.tsx

@@ -4,6 +4,7 @@ import { style } from '../../utils/style';
 import { getValidStyle } from './getValidStyle';
 import { type InputProps } from './InputProps';
 import { renderLabel } from './renderLabel';
+import { defaultStyle } from './styles';
 
 export const Input = JSX<InputProps>(
   // eslint-disable-next-line max-lines-per-function
@@ -88,5 +89,3 @@ export const Input = JSX<InputProps>(
     );
   },
 );
-
-const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';

package/mobile/src/ui-kit/Input/InputFile.tsx

@@ -0,0 +1,132 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { SUCCESS_STATUS, type ResponseData } from '../../api/sendFile';
+import { useDragAndDrop } from '../../hooks/useDragAndDrop';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { CloseButton } from '../DialogManager/CloseButton';
+import { ProgressBar } from '../ProgressBar/ProgressBar';
+import { getValidStyle } from './getValidStyle';
+import { type InputProps } from './InputProps';
+import { renderErrorText } from './renderErrorText';
+import { renderFileInput } from './renderFileInput';
+import { renderInfoText } from './renderInfoText';
+import { borderStyle, defaultStyle } from './styles';
+import { useVerifyFile } from './useVerifyFile';
+
+export const InputFile = JSX<InputProps>(
+  // eslint-disable-next-line max-lines-per-function
+  ({
+    key,
+    className,
+    id,
+    name,
+    type = 'file',
+    label,
+    valid = true,
+    pattern,
+    autoFocus = false,
+    extensions,
+    children,
+    onFocus,
+    onBlur,
+    maxSizeMB,
+    error,
+    onFileChanged = noop,
+  }) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+    const [uploadError, setUploadError] = useState('');
+    const [uploadResponse, setUploadResponse] = useState<ResponseData | null>(null);
+
+    const { verifyFile, isFileUploading, progress } = useVerifyFile({
+      onUploadError: setUploadError,
+      onUploadResponse: setUploadResponse,
+      onFileSelected: setSelectedFile,
+      extensions,
+      maxSizeMB,
+    });
+
+    useEffect(() => {
+      if (autoFocus) {
+        inputRef.current?.focus();
+      }
+    }, [autoFocus, inputRef]);
+
+    const handleFileChange = async (file?: File) => {
+      handleResetFile();
+      if (file) {
+        await verifyFile({ file, onFileChanged });
+      }
+    };
+
+    const handleResetFile = () => {
+      setSelectedFile(null);
+      setUploadError('');
+      setUploadResponse(null);
+      onFileChanged('');
+    };
+
+    const { handleDrag, handleLeave, handleDrop, isDragActive } = useDragAndDrop({
+      onReset: handleResetFile,
+      onFileSelected: verifyFile,
+      uploadResponse,
+      onFileChanged,
+    });
+
+    const paddingStyle = children ? 'pr-3xl' : '';
+    const validStyle = getValidStyle(valid);
+    const activeDragStyle = isDragActive ? 'border-primary-hover' : '';
+
+    return (
+      <div
+        className={style('relative', className)}
+        onDragEnter={handleDrag}
+        onDragOver={handleDrag}
+        onDragLeave={handleLeave}
+        onDrop={handleDrop}
+      >
+        <label
+          className={style(
+            'h-14 cursor-pointer space-y-xs block',
+            defaultStyle,
+            paddingStyle,
+            borderStyle,
+            validStyle,
+            activeDragStyle,
+          )}
+        >
+          {isFileUploading ? (
+            <div>
+              <ProgressBar step={progress} isOnlyInteger={true} />
+            </div>
+          ) : (
+            renderFileInput({
+              label,
+              inputRef,
+              id,
+              key,
+              type,
+              name,
+              pattern,
+              disabled: Boolean(uploadResponse || isFileUploading),
+              onChange: handleFileChange,
+              onFocus,
+              onBlur,
+              extensions,
+              uploadResponse,
+              file: selectedFile,
+            })
+          )}
+        </label>
+        {uploadResponse?.status === SUCCESS_STATUS ? (
+          <CloseButton className="absolute top-0 right-0 z-10" onClose={handleResetFile} />
+        ) : null}
+
+        {renderInfoText(extensions, maxSizeMB)}
+        {renderErrorText(error || uploadError)}
+        {children}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Input/InputFileControl.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getRequiredLabel } from '../../utils/getRequiredLabel';
+import { InputFile } from './InputFile';
+import { type InputProps } from './InputProps';
+
+export const InputFileControl = JSX<InputProps>(
+  ({ label, value = '', error, type, inputRef, required, ...rest }) => {
+    return (
+      <div ref={inputRef}>
+        <InputFile
+          type={type || 'file'}
+          aria-label={label}
+          label={getRequiredLabel({ label, required })}
+          valid={Boolean(!error)}
+          value={value}
+          error={error}
+          {...rest}
+        />
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -3,7 +3,16 @@ import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type InputTypes } from '../../model/InputTypes';
 import { type PreventableEventWithTarget } from '../PreventableEvent';
 
-export interface InputProps<V = string> extends DefaultControlType, ControlProps<V> {
+export type FileInputProps = {
+  extensions?: string[];
+  maxSizeMB?: number;
+  onFileChanged?: (value: string) => void;
+};
+
+export interface InputProps<V = string>
+  extends DefaultControlType,
+    ControlProps<V>,
+    FileInputProps {
   id?: string;
   name?: string;
   type?: InputTypes;

package/mobile/src/ui-kit/Input/checks/checkFIleExtension.ts

@@ -0,0 +1,9 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+
+export const checkFileExtension = async (file: File, extensions?: string[]): Promise<void> => {
+  const fileExt = file.name.split('.')[1];
+  console.log(fileExt, extensions);
+  if (!extensions?.includes(fileExt)) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/checkFileMimeType.ts

@@ -0,0 +1,20 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+
+const EXT_TO_MIME: Record<string, string> = {
+  pdf: 'application/pdf',
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+};
+
+export const checkFileMimeType = async (file?: File, extensions?: string[]): Promise<void> => {
+  const fileMimeType = file?.type ?? '';
+
+  const expectedMimeTypes = (extensions || [])
+    .map((ext) => EXT_TO_MIME[ext])
+    .filter((mime) => mime !== undefined);
+
+  if (!expectedMimeTypes.includes(fileMimeType)) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};

package/mobile/src/ui-kit/Input/checks/checkFileSignature.ts

@@ -0,0 +1,30 @@
+import { EXTENSIONS_ERROR_TEXT } from '../constants';
+import { getFileSignature } from './getFileSignature';
+
+const SIGNATURES: Record<string, string> = {
+  pdf: '25 50 44 46 2d',
+  docx: '50 4b 03 04',
+  pptx: '50 4b 03 04',
+  xlsx: '50 4b 03 04',
+  doc: 'D0 CF 11 E0 A1 B1 1A E1',
+};
+
+export const checkFileSignature = async (
+  file?: File,
+  expectedTypes?: (keyof typeof SIGNATURES)[],
+): Promise<void> => {
+  const hexSignature = await getFileSignature(file);
+
+  const isValid = (expectedTypes ?? []).some((type) => {
+    const expectedSignature = SIGNATURES[type]?.toLowerCase();
+
+    console.log(expectedSignature);
+    console.log(hexSignature);
+
+    return expectedSignature && hexSignature.startsWith(expectedSignature);
+  });
+
+  if (!isValid) {
+    throw new Error(EXTENSIONS_ERROR_TEXT);
+  }
+};