@redneckz/wildless-cms-uni-blocks 0.3.96 → 0.4.0

package/src/components/Calculator/useBonusCalculatorParams.ts

@@ -1,4 +1,3 @@
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { BONUS_CALC_DEFAULT_DIR, DEFAULT_BONUS_CALCULATOR_PARAMS } from './constants';
 import { getBonus } from './getBonus';
 import { useCalculatorParams } from './useCalculatorParams';
@@ -29,16 +28,13 @@ export interface BonusCalculatorParams
 }
 
 export const useBonusCalculatorParams = (
-  context: ContentPageContext,
   userInputParams: BonusCalculatorUserInputParams,
   sourceBookDir: string,
 ) => {
   const { travelExpenseValue, restExpenseValue } = userInputParams;
   const bonusCalculatorSourceBookParams =
-    useCalculatorParams<BonusCalculatorSourceBookParams>(
-      context.useAsyncData,
-      sourceBookDir || BONUS_CALC_DEFAULT_DIR,
-    ) || DEFAULT_BONUS_CALCULATOR_PARAMS;
+    useCalculatorParams<BonusCalculatorSourceBookParams>(sourceBookDir || BONUS_CALC_DEFAULT_DIR) ||
+    DEFAULT_BONUS_CALCULATOR_PARAMS;
 
   const [monthBonus, yearBonus] = getBonus(
     bonusCalculatorSourceBookParams,

package/src/components/Calculator/useCalculatorParams.ts

@@ -1,6 +1,6 @@
-import type { AsyncDataHook } from '../ContentPage/ContentPageContext';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 
-export function useCalculatorParams<Data>(useAsyncData: AsyncDataHook, dir: string) {
+export function useCalculatorParams<Data>(dir: string) {
   const { data } = useAsyncData<Data>(
     `/wcms-resources/${dir}.json`,
     fetchCalculatorSourceBookParams,

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -1,4 +1,3 @@
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
 import { getMonthlyPayment } from './getMonthlyPayment';
 import { useCalculatorParams } from './useCalculatorParams';
@@ -36,16 +35,12 @@ export type CreditCalculatorData = {
 };
 
 export const useCreditCalculatorParams = (
-  context: ContentPageContext,
   userInputParams: CreditCalculatorUserInputParams,
   sourceBookDir?: string,
 ): CreditCalculatorParams => {
   const { isInsurance, isSalaryClient, isStateEmployee, moneyValue } = userInputParams;
 
-  const data = useCalculatorParams<CreditCalculatorData>(
-    context.useAsyncData,
-    sourceBookDir || CREDIT_CALC_DEFAULT_DIR,
-  );
+  const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
   const creditCalculatorSourceBookParams =
     data?.rows?.find((_) => {
       return (

package/src/components/Catalog/Catalog.tsx

@@ -1,11 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { Headline } from '../Headline/Headline';
 import { CatalogCard } from './CatalogCard';
 import type { CatalogCardType, CatalogContent } from './CatalogContent';
-import { Headline } from '../Headline/Headline';
 
 export interface CatalogProps extends CatalogContent, UniBlockProps {}
 
@@ -15,7 +16,7 @@ const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
   ({ context, cards = [], className = '', title, description, ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     return (
       <BlockWrapper

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
@@ -24,8 +25,8 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
         column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
       })) || [];
 
-    const [columnsViewState, setColumnsViewState] = context.useState<boolean[]>(
-      new Array(columns?.length).fill(!visibleRowLength),
+    const [columnsViewState, setColumnsViewState] = useState(
+      new Array<boolean>(columns?.length || 0).fill(!visibleRowLength),
     );
 
     const handleToggleColumn = (i: number) => {

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -19,7 +20,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     isColoredFirstColumn = false,
     ...rest
   }) => {
-    const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
+    const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
 
     return (

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
-import { ComparisonTableRows } from './ComparisonTableRows';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
-import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
 import { Column, RowHeader } from './ComparisonTableContent';
+import { ComparisonTableRows } from './ComparisonTableRows';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
 
 interface ComparisonTableBodyProps {
   context: ContentPageContext;
@@ -29,7 +30,7 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
       }))
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const tableArrowScrollProps = useTableArrowScrollControl({
       columnsLength: colData.length,

package/src/components/ContentPage/ContentPage.tsx

@@ -1,4 +1,5 @@
-import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
+import type { UNIComponent } from '@redneckz/uni-jsx';
+import { JSX } from '@redneckz/uni-jsx';
 import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import { style2className } from '../../utils/style2className';
 import type { BlockContent } from '../BlockContent';
@@ -17,10 +18,7 @@ export type BlockDecorator<VNode = any> = (
   index?: number | string,
 ) => any;
 
-export type JSXBlock<BlockProps = BlockContent> = (
-  props: PropsWithChildren<UniBlockProps & BlockProps, any>,
-  context?: any,
-) => any;
+export type JSXBlock<BlockProps = BlockContent> = UNIComponent<BlockProps & UniBlockProps>;
 
 export type BlocksRegistry = Record<string, JSXBlock>;
 

package/src/components/ContentPage/ContentPageContext.tsx

@@ -9,32 +9,13 @@ export interface Router {
   replace: (url: string) => void;
 }
 
-export interface LikeService {
-  likeCount: number;
-  like: () => void;
-  dislike: () => void;
-}
-
-export type HandlerDecorator = <F extends Function>(handler: F, targetContent: any) => F;
+export type HandlerDecorator = <F extends Function>(handler: F, targetContent?: any) => F;
 
 export interface Search {
   term: string;
   setTerm: (t: string) => void;
 }
 
-export type AsyncDataHook = <Data, Err = any>(
-  key: string,
-  fetcher: (fetcherKey: string) => Promise<Data>,
-) => { data?: Data; error?: Err };
-
-export type GeolocationHook = (defaultLocation: string) => [string, () => void];
-
-export type SetStateAction<S> = S | ((prevState: S) => S);
-
-export type SetStateHook = <State>(
-  initialState: State | (() => State),
-) => [State, (action: SetStateAction<State>) => void];
-
 export interface IntersectionObserverTagProps {
   tag: keyof HTMLElementTagNameMap;
   className?: string;
@@ -48,12 +29,6 @@ export type IntersectionObserverComponent = (props: IntersectionObserverTagProps
 
 export interface ContentPageContext {
   useRouter: () => Router;
-  useState: SetStateHook;
-  useAsyncData: AsyncDataHook;
-  useGeolocation: GeolocationHook;
-  useLikeService: () => LikeService;
-  useSearch: () => Search;
-  useEffect: <Deps extends any[]>(effect: () => (() => void) | void, deps?: Deps) => void;
   handlerDecorator?: HandlerDecorator;
   IntersectionObserverTag: IntersectionObserverComponent;
 }

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
@@ -30,7 +31,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     const { useRouter, handlerDecorator } = context;
     const router = useRouter();
 
-    const [calcState, setCalcState] = context.useState<CalcState>({
+    const [calcState, setCalcState] = useState<CalcState>({
       inputSell: '',
       inputBuy: '',
       selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -19,7 +19,7 @@ export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlock
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
-    const currencyRates = useExchangeRates(context.useAsyncData);
+    const currencyRates = useExchangeRates();
 
     const currencyRatesBuy = currencyRates.filter((_) => _.buy);
     currencyRatesBuy.unshift({ code: Currency.RUB });

package/src/components/Footer/Footer.mobile.tsx

@@ -26,7 +26,7 @@ export const Footer = JSX<FooterProps>(
     context,
     horizontalNavigationTitle,
   }) => {
-    const sitemap = useSitemap(context.useAsyncData);
+    const sitemap = useSitemap();
     const dispositions = sitemap?.dispositions;
 
     return (

package/src/components/Footer/Sitemap.tsx

@@ -11,7 +11,7 @@ export interface SitemapProps extends UniBlockProps {
 }
 
 export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) => {
-  const sitemap = useSitemap(context.useAsyncData);
+  const sitemap = useSitemap();
   const mergedItems = mergeTopItems(sitemap.topItems, items);
   const linkParams = {
     router: context.useRouter(),
@@ -19,7 +19,7 @@ export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) =>
   };
 
   return (
-    <div className={`flex items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
+    <div className={`flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
       {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
     </div>
   );

package/src/components/Gallery/GalleryInner.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
@@ -13,7 +14,7 @@ export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
 
 export const GalleryInner = JSX<GalleryInnerProps>(
   ({ context, cards = [], className = '', version = 'normal', ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
     const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);

package/src/components/GroupBlock/GroupBlock.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { filterBlocksByTag } from './filterBlocksByTag';
@@ -16,7 +17,7 @@ export interface GroupBlockProps extends GroupBlockContent, UniBlockProps {
 
 export const GroupBlock = JSX<GroupBlockProps>(
   ({ className = '', tabs, context, groupBlocks = [], isShowCounter, ...rest }) => {
-    const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
+    const [currentTag, setCurrentTag] = useState(tabs?.[0]?.tag);
 
     const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
 

package/src/components/Header/Header.mobile.tsx

@@ -1,16 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
-import type { HeaderContent } from './HeaderContent';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { UniBlockProps } from '../../types';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
 import { getAccordionItems } from '../../utils/getAccordionItems';
 import { Accordion } from '../Accordion/Accordion';
 import { HeaderBurger } from './HeaderBurger';
+import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
@@ -18,7 +19,7 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 export const Header = JSX<HeaderProps>(
   ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems }) => {
     const router = context.useRouter();
-    const sitemap = useSitemap(context.useAsyncData);
+    const sitemap = useSitemap();
     const dispositions = sitemap?.dispositions;
     const { handlerDecorator } = context;
 
@@ -26,7 +27,7 @@ export const Header = JSX<HeaderProps>(
     const activeTopItem = mergedItems.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
     const activeSubItem = findActiveSubItem(router)(subItems);
-    const [burgerMenuShow, setBurgerMenuShow] = context.useState(false);
+    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
     const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
     return (

package/src/components/Header/Header.tsx

@@ -31,7 +31,7 @@ export const Header = JSX<HeaderProps>(
     ...rest
   }) => {
     const router = context.useRouter();
-    const sitemap = useSitemap(context.useAsyncData);
+    const sitemap = useSitemap();
     const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
@@ -60,7 +60,6 @@ export const Header = JSX<HeaderProps>(
             <Logo className="mr-8" bgColor={bgColor} logo={logo} />
             {topMenu}
             <HeaderSecondaryMenu
-              context={context}
               className="ml-auto"
               defaultLocation={defaultLocation}
               bgColor={bgColor}

package/src/components/Header/HeaderBurger.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useGeolocation } from '../../hooks/useGeolocation';
 import type { VNode } from '../../model/VNode';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
@@ -15,7 +16,7 @@ export interface HeaderBurgerProps {
 
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
-    const [city, getCity] = context.useGeolocation(defaultLocation);
+    const [city, getCity] = useGeolocation(defaultLocation);
 
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useGeolocation } from '../../hooks/useGeolocation';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img/Img';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
@@ -11,7 +11,9 @@ interface HeaderSecondaryMenuContent {
   bgColor?: BgColorVersion;
 }
 
-export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent, UniBlockProps {}
+export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
+  className?: string;
+}
 
 const COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-primary-text hover:text-primary-main',
@@ -27,8 +29,8 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
-    const [city, getCity] = context.useGeolocation(defaultLocation);
+  ({ className, defaultLocation = '', bgColor = 'bg-white' }) => {
+    const [city, getCity] = useGeolocation(defaultLocation);
 
     return (
       <div className={`flex items-center ${className || ''}`}>

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -14,11 +15,11 @@ export interface HeaderSubMenuProps {
 }
 
 export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
-  const [menuVisible, setMenuVisible] = context.useState(false);
+  const [menuVisible, setMenuVisible] = useState(false);
   const router = context.useRouter();
   const { handlerDecorator, IntersectionObserverTag } = context;
 
-  const [visibleItemsCount, setVisibleItemsCount] = context.useState<number>(subItems.length);
+  const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
   const activeSubItem = findActiveSubItem(router)(subItems);

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -9,7 +10,7 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
-    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
     return (
       <BlockWrapper

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
@@ -27,9 +28,9 @@ type InsuranceSlideProps = {
 };
 
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
-  ({ className = '', context, cards = [], button }) => {
-    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-    const [tabsShift, setTabsShift] = context.useState(0);
+  ({ className = '', cards = [], button }) => {
+    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const [tabsShift, setTabsShift] = useState(0);
 
     const handleNextClick = () => setTabsShift(tabsShift + 1);
     const handlePrevClick = () => setTabsShift(tabsShift - 1);

package/src/components/LikeControl/LikeControl.tsx

@@ -1,10 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLikeService } from '../../hooks/useLikeService';
+import { defaultHandlerDecorator } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { LikeButton } from '../../ui-kit/Button/LikeButton';
 
 export const LikeControl = JSX<UniBlockProps>(({ className, context, ...rest }) => {
-  const likeService = context.useLikeService();
+  const { useRouter, handlerDecorator = defaultHandlerDecorator } = context;
+
+  const router = useRouter();
+  const likeService = useLikeService(router.pathname);
 
   return (
     <BlockWrapper
@@ -15,9 +20,12 @@ export const LikeControl = JSX<UniBlockProps>(({ className, context, ...rest })
       }`}
       {...rest}
     >
-      <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
       <LikeButton
-        onClick={likeService.dislike}
+        onClick={handlerDecorator(likeService.like)}
+        ariaLabel="Поставить отметку «лайк»"
+      />
+      <LikeButton
+        onClick={handlerDecorator(likeService.dislike)}
         className="rotate-180"
         ariaLabel="Поставить отметку «дизлайк»"
       />

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { ProductGalleryContent } from './ProductGalleryContent';
@@ -32,7 +33,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', context, slides = [], version = 'primary', ...rest }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
-    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
     return (
       <BlockWrapper

package/src/components/Recommendation/Recommendation.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -14,7 +15,7 @@ export interface RecommendationProps extends RecommendationContent, UniBlockProp
 
 export const Recommendation = JSX<RecommendationProps>(
   ({ context, recommendations = [], className = '', title, version, ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const blockClassName =
       version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
@@ -72,14 +73,14 @@ const DATA = {
 
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ context, className = '', ...rest }) => {
-    const [days, setDays] = context.useState(DEFAULT_DAYS);
+    const [days, setDays] = useState(DEFAULT_DAYS);
     const data = DATA;
 
     return (
       <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
         <div className="flex justify-between align-top mb-6">
           {data?.cities?.length ? (
-            <SafeDepositRentalForm {...data} days={days} setDays={setDays} context={context} />
+            <SafeDepositRentalForm {...data} days={days} setDays={setDays} />
           ) : null}
           <SafeDepositRentalTotal days={days} />
         </div>