@redneckz/wildless-cms-uni-blocks 0.14.682 → 0.14.683

package/mobile/src/components/CreditForm/CreditFormStatusTracker.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { getTaskStatus, STATUS_TYPE } from '../../api/RetailAPI/getTaskStatus';
 import { sendSignalToProcess, type SignalType } from '../../api/RetailAPI/sendSignalToProcess';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { type VNode } from '../../model/VNode';
 import { FailedStatusContent } from './FailedStatusContent';
 import { PendingStatusContent } from './PendingStatusContent';
 import { ReworkStatusContent } from './ReworkStatusContent';
@@ -44,7 +45,7 @@ export const CreditFormStatusTracker = JSX(() => {
 });
 
 const renderStatus = (status: STATUS_TYPE, handleExpire: () => void) => {
-  const statusesMap: Record<STATUS_TYPE, JSX.Element> = {
+  const statusesMap: Record<STATUS_TYPE, VNode> = {
     IN_PROCESS: <PendingStatusContent handleExpireTimer={handleExpire} />,
     CANCELLED: <FailedStatusContent />,
     APPROVED: <SuccessStatusContent />,

package/mobile/src/components/CreditForm/CreditFormStep.tsx

@@ -3,6 +3,7 @@ import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { type SectionsProps } from '../../model/InputSectionsType';
+import { type VNode } from '../../model/VNode';
 import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
 import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
 import { CreditFormStatusTracker } from './CreditFormStatusTracker';
@@ -16,7 +17,7 @@ export interface CreditFormStepProps {
   sections: SectionsProps[];
   onNextStep: () => void;
   onPrevStep: () => void;
-  renderStep?: (props: StepProps) => JSX.Element | JSX.Element[] | undefined;
+  renderStep?: (props: StepProps) => VNode | VNode[] | undefined;
   isFormFinished: boolean;
   finishForm?: (bool: boolean) => void;
 }

package/mobile/src/components/Depository/DepositoryItem.tsx

@@ -1,3 +1,4 @@
+import { JSX } from '@redneckz/uni-jsx';
 import { API_BASE_URI } from '../../api/apiBaseUrl';
 import { useLink } from '../../hooks/useLink';
 import { Text } from '../../ui-kit/Text/Text';
@@ -5,7 +6,7 @@ import { formatDate } from '../../utils/formatDate';
 import { renderRoundedIcon } from '../RollupItem/renderRoundedIcon';
 import { type DepositoryDataItem } from './useDepository';
 
-export const DepositoryItem = ({ title, timestamp, publicId }: DepositoryDataItem) => {
+export const DepositoryItem = JSX(({ title, timestamp, publicId }: DepositoryDataItem) => {
   const link = useLink();
   const { href } = link({ href: `${API_BASE_URI}/depository/${publicId}/file` });
 
@@ -27,4 +28,4 @@ export const DepositoryItem = ({ title, timestamp, publicId }: DepositoryDataIte
       </div>
     </div>
   );
-};
+});

package/mobile/src/model/ColumnCount.ts

@@ -0,0 +1,5 @@
+/**
+ * @title Количество колонок
+ * @enumNames ["Одна", "Две"]
+ */
+export type ColumnsCount = 1 | 2;

package/mobile/src/model/InputSectionsType.ts

@@ -1,14 +1,12 @@
-import {
-  type FieldDef,
-  type FormColumnsCount,
-} from '../components/ApplicationLeadForm/ApplicationLeadFormContent';
+import { type FieldDef } from '../components/ApplicationLeadForm/ApplicationLeadFormContent';
+import { type ColumnsCount } from './ColumnCount';
 import { type TitleProps } from './HeadlineType';
 
 /**
  * @title Секция полей ввода
  */
 export type SectionsProps = TitleProps & {
-  columns?: FormColumnsCount;
+  columns?: ColumnsCount;
   inputs?: FieldDef[];
 };
 

package/mobile/src/setup-fixture.ts

@@ -26,7 +26,7 @@ useRouter.setup(() => {
   return {
     href,
     isReady: true,
-    pathname: new URL(href).pathname,
+    pathname: new URL(href as string).pathname,
     query: Object.fromEntries(new URLSearchParams(globalThis.location.search)),
     push: (url: string) => {
       globalThis.history.pushState(null, '', url);

package/mobile/src/ui-kit/Checkbox/CheckboxWithDoc.tsx

@@ -16,7 +16,7 @@ interface CheckboxWithDocProps extends CheckboxProps {
 
 export const CheckboxWithDoc = JSX<CheckboxWithDocProps>(
   ({ className, error, docId, ...props }) => {
-    const { open } = useDialogManager();
+    const { open, close } = useDialogManager();
     const isMobile = useMobileMode();
 
     return (
@@ -26,7 +26,7 @@ export const CheckboxWithDoc = JSX<CheckboxWithDocProps>(
           {docId ? (
             <LinkButton
               className="text-primary-main"
-              onClick={() => openDocument(open, docId, isMobile)}
+              onClick={() => openDocument({ open, close, id: docId, convertToPng: isMobile })}
             >
               <Text>{OPEN_DOC_BUTTON_TEXT}</Text>
             </LinkButton>

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

@@ -9,6 +9,7 @@ import { useDialogManager } from '../DialogManager/useDialogManager';
 import { Heading } from '../Heading/Heading';
 import { Paragraph } from '../Paragraph/Paragraph';
 import { RadioButtonGroup } from '../RadioButtonGroup/RadioButtonGroup';
+
 export interface ConsentBkiDialogProps {
   handleSubmit?: (confirmStatus: string) => void;
   onClose?: () => void;
@@ -51,7 +52,10 @@ export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(function ({
       onClose={onClose}
     >
       <div className="flex flex-col gap-xl items-center">
-        <div role="button" onClick={() => openDocument(open, CONSENT_BKI_ID, isMobile)}>
+        <div
+          role="button"
+          onClick={() => openDocument({ open, close, id: CONSENT_BKI_ID, convertToPng: isMobile })}
+        >
           <Heading
             className="text-center text-balance"
             headingType="h2"

package/mobile/src/ui-kit/DialogManager/openDocument.tsx

@@ -1,12 +1,15 @@
 import { type VNode } from '../../model/VNode';
+import { Button } from '../Button/Button';
 import { getDocument } from '../Checkbox/getDocument';
 import { Dialog } from './Dialog';
 
-export const openDocument = async (
-  open: (dialog: VNode) => void,
-  id: number,
-  convertToPng = false,
-) => {
+type OpenDocumentType = {
+  open: (dialog: VNode) => void;
+  close: (dialog: VNode) => void;
+  id: number;
+  convertToPng: boolean;
+};
+export const openDocument = async ({ open, close, id, convertToPng = false }: OpenDocumentType) => {
   const document = await getDocument(id, convertToPng);
 
   open(
@@ -16,6 +19,9 @@ export const openDocument = async (
       ) : (
         <iframe src={`${document}#toolbar=0`} className="w-full h-[80vh]" id="iframe-dialog" />
       )}
+      <Button className="mx-auto mt-m" type="button" onClick={close}>
+        Ознакомиться
+      </Button>
     </Dialog>,
   );
 };

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

@@ -8,7 +8,7 @@ export const BankEmpoleeCodeField = JSX<CustomFieldProps>(({ field, input }) =>
   <InputControl
     label="Код представителя Банка"
     placeholder="Введите код"
-    type="number"
+    isInteger={true}
     {...getValidation(field('bankEmployeeCode'), validatorObj.bankEmployeeCode, input?.required)}
     {...input}
   />

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

@@ -8,7 +8,7 @@ export const ChildrenField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Количество детей до 18 лет"
     placeholder="Введите значение"
-    type="number"
+    isInteger={true}
     {...getValidation(field('children'), validatorObj.children, input?.required)}
     {...input}
   />

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

@@ -7,7 +7,7 @@ import { getValidation } from '../getValidation';
 export const CollectionCountField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Количество объектов инкассации"
-    type="number"
+    isInteger={true}
     {...getValidation(field('collectionCount'), validatorObj.collectionCount, input?.required)}
   />
 ));

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

@@ -8,7 +8,7 @@ export const DependentsField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Количество иждивенцев"
     placeholder="За исключение детей до 18 лет"
-    type="number"
+    isInteger={true}
     maxLength={2}
     {...getValidation(field('dependents'), validatorObj.dependents, input?.required)}
     {...input}

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

@@ -11,7 +11,7 @@ export const DulNumberField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     disabled={input?.filledByEsia && isEsiaAuthorize(field, FIELD_NAME)}
     label="Номер документа"
-    type="number"
+    isInteger={true}
     maxLength={6}
     {...getValidation(field('dulNumber'), validatorObj.dulNumber, input?.required)}
   />

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

@@ -11,7 +11,7 @@ export const DulSerieField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     disabled={input?.filledByEsia && isEsiaAuthorize(field, FIELD_NAME)}
     label="Серия документа"
-    type="number"
+    isInteger={true}
     maxLength={4}
     {...getValidation(field('dulSerie'), validatorObj.dulSerie, input?.required)}
   />

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

@@ -18,7 +18,7 @@ export const DulSubdivisionCodeField = JSX<CustomFieldProps>(({ field, input })
     <InputControl
       disabled={input?.filledByEsia && isEsiaAuthorize(field, FIELD_NAME)}
       label="Код подразделения"
-      type="number"
+      isInteger={true}
       maxLength={6}
       {...input}
       {...getValidation(field(FIELD_NAME), validatorObj.dulSubdivisionCode, input?.required)}

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

@@ -8,7 +8,7 @@ export const ExpensesField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Обязательные расходы в месяц"
     placeholder="Введите значение"
-    type="number"
+    isInteger={true}
     {...getValidation(field('expenses'), validatorObj.expenses, input?.required)}
     {...input}
   />

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

@@ -15,7 +15,7 @@ export const InnField = JSX<CustomFieldProps>(({ field, input }) => {
   return (
     <InputControl
       label="ИНН"
-      type="number"
+      isInteger={true}
       maxLength={12}
       {...input}
       {...getValidation(field('inn'), validatorObj.inn, input?.required)}

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

@@ -8,7 +8,7 @@ export const JobsNumberField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Количество мест работы за последние 5 лет"
     placeholder="Количество мест"
-    type="number"
+    isInteger={true}
     maxLength={2}
     {...getValidation(field('jobsNumber'), validatorObj.jobsNumber, input?.required)}
     {...input}

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

@@ -8,7 +8,7 @@ export const MandatoryPaymentsField = JSX<CustomFieldProps>(({ field, input }) =
   <InputControl
     label="Обязательные выплаты"
     placeholder="Введите значение"
-    type="number"
+    isInteger={true}
     {...getValidation(field('mandatoryPayments'), validatorObj.mandatoryPayments, input?.required)}
     {...input}
   />

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

@@ -8,7 +8,7 @@ export const OtherIncomeField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Иные доходы"
     placeholder="Введите значение"
-    type="number"
+    isInteger={true}
     {...getValidation(field('otherIncome'), validatorObj.otherIncome, input?.required)}
     {...input}
   />

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

@@ -19,7 +19,7 @@ export const PartInBusinessField = JSX<CustomFieldProps>(({ field, input }) => {
     <InputControl
       label="Доля участия в бизнесе"
       placeholder="в %"
-      type="number"
+      isInteger={true}
       maxLength={3}
       {...getValidation(field(FIELD_NAME), validatorObj.partInBusiness, input?.required)}
       {...input}

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

@@ -22,7 +22,7 @@ export const RetirementIncomeField = JSX<CustomFieldProps>(({ field, input }) =>
     <InputControl
       label="Пенсионные доходы"
       placeholder="Введите значение"
-      type="number"
+      isInteger={true}
       {...getValidation(field('retirementIncome'), validatorObj.retirementIncome, input?.required)}
       {...input}
       onChange={onChange}

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

@@ -8,7 +8,7 @@ export const TotalIncomeField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Совокупный официальный доход в месяц после вычета налогов (зарплата, премии)"
     placeholder="Введите значение"
-    type="number"
+    isInteger={true}
     {...getValidation(field('totalIncome'), validatorObj.totalIncome, input?.required)}
     {...input}
   />

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

@@ -22,7 +22,7 @@ export const WagesField = JSX<CustomFieldProps>(({ field, input }) => {
     <InputControl
       label="Совокупный доход в месяц после вычета налогов (зарплата, премии)"
       placeholder="Введите значение"
-      type="number"
+      isInteger={true}
       {...getValidation(field('wages'), validatorObj.wages, input?.required)}
       {...input}
       onChange={onChange}

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

@@ -99,7 +99,8 @@ const PRODUCT_REF = {
 };
 
 export const getField =
-  (field: FormFieldRegisterer<any>, typeForm: string) => (input: FieldDef, i: number) => {
+  (field: FormFieldRegisterer<any>, typeForm = '') =>
+  (input: FieldDef, i: number) => {
     const isPremium = typeForm === 'ULTRASERVICE' || typeForm === 'PREMIUMSERVICE';
 
     const InputsMap = {

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

@@ -1,4 +1,4 @@
-import type { FormColumnsCount } from '../../components/ApplicationLeadForm/ApplicationLeadFormContent';
+import { type ColumnsCount } from '../../model/ColumnCount';
 
-export const inputColumnStyles = (column: FormColumnsCount | undefined) =>
+export const inputColumnStyles = (column: ColumnsCount | undefined) =>
   column === 2 ? '@xl:grid-cols-2' : '';

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { getRequiredLabel } from '../../utils/getRequiredLabel';
@@ -25,6 +25,7 @@ export const InputControl = JSX<InputProps>(
     type,
     name = '',
     daDataQueryPrefix,
+    isInteger = false,
     maxLength,
     dadata = false,
     disabled = false,
@@ -40,6 +41,10 @@ export const InputControl = JSX<InputProps>(
       [dadata, isOpen, onChange],
     );
 
+    useEffect(() => {
+      isInteger && value ? onChange(normalizeInteger(value)) : null;
+    }, [value]);
+
     const inputRef = useInputPopup({
       isOpen: isOpen && dadata,
       name,
@@ -76,5 +81,7 @@ export const InputControl = JSX<InputProps>(
   },
 );
 
+const normalizeInteger = (val = '') => val.replace(/[^\d]+/g, '');
+
 const getPlaceholder = (placeholder?: string, errors?: string[], label?: string) =>
   errors && !label ? `${placeholder}*` : placeholder;

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

@@ -19,4 +19,5 @@ export interface InputProps<V = string> extends DefaultControlType, ControlProps
   isTextarea?: boolean;
   dadata?: boolean;
   maxLength?: number;
+  isInteger?: boolean;
 }

package/mobile/src/ui-kit/LocationDialog/SearchBar.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { inputValidStyle } from '../Input/inputValidStyle';
+import { type PreventableEvent } from '../PreventableEvent';
 
 export interface SearchBarInnerProps {
   className?: string;
@@ -25,7 +26,9 @@ export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSe
           `h-12 pl-m w-full peer text-l text-black rounded-md box-border`,
         )}
         value={searchTerm}
-        onChange={(e) => onSearch(e.target.value.toLowerCase())}
+        onChange={(e: PreventableEvent & { target: { value: string } }) =>
+          onSearch(e.target.value.toLowerCase())
+        }
         type="text"
         name="location-search-bar-input"
       />

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

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { defaultCheckStyle } from '../Checkbox/checkboxStyle';
 import { inputValidStyle } from '../Input/inputValidStyle';
+import { type PreventableEvent } from '../PreventableEvent';
 import { Text } from '../Text/Text';
 import { type RadioProps } from './RadioProps';
 
@@ -19,7 +20,9 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
         value={value}
         name={name}
         checked={checked}
-        onChange={(_) => onChange?.(_.target.value)}
+        onChange={(_: PreventableEvent & { target: { value: string } }) =>
+          onChange?.(_.target.value)
+        }
         role="radio"
       />
       {text ? <Text color="text-primary-text">{text}</Text> : null}

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

@@ -5,11 +5,11 @@ export const Rating = () => {
   const [rating, setRating] = useState(0);
   const [hoverRating, setHoverRating] = useState(0);
 
-  const handleClick = (event: React.MouseEvent<HTMLSpanElement>) => {
+  const handleClick = (event: { currentTarget: { id: string } }) => {
     setRating(parseInt(event.currentTarget.id));
   };
 
-  const handleMouseEnter = (event: React.MouseEvent<HTMLSpanElement>) => {
+  const handleMouseEnter = (event: { currentTarget: { id: string } }) => {
     setHoverRating(parseInt(event.currentTarget.id));
   };
 

package/mobile/src/ui-kit/VerifyPhoneDialog/InputCode.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type PreventableEvent } from '../PreventableEvent';
 
 type InputCodeProps = {
   values: string[];
-  setValues: React.Dispatch<React.SetStateAction<string[]>>;
+  setValues: (_: string[]) => void;
   hasError?: boolean;
   errorText?: string;
 };
@@ -17,7 +18,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, err
   }, [activeIndex]);
 
   const handleChange = useCallback(
-    (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    (index: number) => (event: PreventableEvent & { currentTarget: { value: string } }) => {
       const { value } = event.currentTarget;
       const oneValue = value.slice(0, 1);
       setValues(values.map((_, i) => (i === index ? oneValue : _)));
@@ -27,7 +28,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, err
   );
 
   const handleKeyDown = useCallback(
-    (currentIndex: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {
+    (currentIndex: number) => (event: PreventableEvent & { key: string }) => {
       const { key } = event;
       if (key === 'Backspace' && !values[currentIndex]) {
         const previousIndex = currentIndex > 0 ? currentIndex - 1 : values.length - 1;
@@ -40,7 +41,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, err
   );
 
   const handlePaste = useCallback(
-    (event: React.ClipboardEvent<HTMLInputElement>) => {
+    (event: PreventableEvent & { clipboardData: { getData: (v: string) => string } }) => {
       event.preventDefault();
       const pastedData = event.clipboardData.getData('text');
       const updatedValues = values.map((_, idx) => (idx < pastedData.length ? pastedData[idx] : _));

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

@@ -110,7 +110,7 @@ const renderTextButton = (textButton: string, isDisabled: boolean, handleSubmit:
 
 const renderText = (
   timeNextReq: number,
-  setTimeNextReq: React.Dispatch<React.SetStateAction<number>>,
+  setTimeNextReq: (value: number) => void,
   handleSendCode: () => void,
 ) =>
   timeNextReq ? (

package/mobile/src/ui-kit/YandexMap/renderSearchField.tsx

@@ -15,7 +15,7 @@ export const renderSearchField = (
   yandexMaps: ymaps.Map,
   updatePointsToRender: (any: MockPoints[] | null) => void,
 ) => {
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onChange = (e: { target?: { value?: string } }) => {
     const value: string = e.target?.value ? e.target?.value.toLowerCase() : '';
     if (value) {
       const searchResult = points.filter((_: MockPoints) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.682",
+  "version": "0.14.683",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -12,8 +12,8 @@
   "main": "./dist/index.js",
   "types": "./lib/index.d.ts",
   "engines": {
-    "npm": ">=7.0.0",
-    "node": ">=16.0.0"
+    "npm": ">=10.0.0",
+    "node": ">=20.0.0"
   },
   "exports": {
     ".": {
@@ -121,19 +121,19 @@
     "cosmos:export": "rimraf ./build && cosmos-export && cosmos-export --config cosmos.config.mobile.json",
     "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0",
     "e2e": "cypress open",
-    "e2e:run": "cypress run --browser chrome --env type=actual",
+    "e2e:run": "cypress run --browser chrome --env visualRegressionType=regression",
     "e2e:test": "npm run clean:diff && npm run e2e:run",
     "e2e:base": "npm run create:base && npm run clean:diff && npm run clean:actual",
-    "create:base": "cypress run --browser chrome --env type=base --config screenshotsFolder=cypress/snapshots/base",
+    "create:base": "cypress run --browser chrome --env visualRegressionType=base",
     "clean:diff": "rimraf  ./cypress/snapshots/diff || exit 0",
     "clean:actual": "rimraf ./cypress/snapshots/actual || exit 0",
     "clean:build": "rimraf ./build || exit 0"
   },
   "peerDependencies": {
-    "cypress": "^10.6.0",
-    "cypress-visual-regression": "^1.7.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "cypress": "^13.13.0",
+    "cypress-visual-regression": "5.0.0",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
   },
   "dependencies": {
     "@redneckz/json-op": "^0.0.12",
@@ -147,48 +147,49 @@
     "rehype-stringify": "^9.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
-    "sharp": "^0.30.6",
+    "sharp": "^0.33.4",
     "unified": "^10.1.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-env": "^7.24.7",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
     "@size-limit/file": "^7.0.8",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.0.0",
     "@types/glob": "^8.0.0",
-    "@types/jest": "^28.1.5",
-    "@types/sharp": "^0.31.0",
+    "@types/jest": "^29.5.12",
+    "@types/sharp": "^0.32.0",
     "@types/yandex-maps": "^2.1.27",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/experimental-utils": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
     "autoprefixer": "^10.4.7",
-    "babel-jest": "^28.1.3",
+    "babel-jest": "^29.7.0",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.11",
-    "cypress-mochawesome-reporter": "^3.2.3",
+    "cypress-mochawesome-reporter": "^3.8.2",
     "eslint": "^8.21.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-local-eslint-rules": "./eslint-rules",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.15.0",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.6.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^29.0.3",
-    "lint-staged": "^13.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.7",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
     "postcss-loader": "^7.0.0",
     "prettier": "2.6.2",
     "prettier-plugin-organize-imports": "^3.2.2",
-    "react-cosmos": "^5.7.2",
+    "react-cosmos": "^6.1.1",
+    "react-cosmos-plugin-webpack": "^6.1.1",
     "replace-in-file": "^6.3.5",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.6",
@@ -197,12 +198,15 @@
     "style-loader": "^3.3.1",
     "svgo": "^2.8.0",
     "tailwindcss": "^3.1.8",
-    "ts-jest": "^28.0.6",
+    "ts-jest": "^29.1.5",
     "ts-json-schema-generator": "^1.1.2",
     "ts-loader": "^9.3.0",
     "typescript": "^4.7.4",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^5.0.1"
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4"
+  },
+  "overrides": {
+    "micromatch": "^4.0.7"
   },
   "size-limit": [
     {