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

package/mobile/src/components/Header/Header.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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/ProductTile/ProductTile.tsx

@@ -6,8 +6,8 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 import { Headline } from '../Headline/Headline';
+import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -42,6 +42,7 @@ export const ProductTile = JSX<ProductTileProps>(
           <Headline
             context={context}
             className="!p-0"
+            as="h2"
             title={title}
             description={description}
             headlineVersion={headlineVersion}

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { PromoTileContent } from './PromoTileContent';
 import { Headline } from '../Headline/Headline';
+import type { PromoTileContent } from './PromoTileContent';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
@@ -48,6 +48,7 @@ export const PromoTile = JSX<PromoTileProps>(
                   headlineVersion={getTileHeadingType(className)}
                   bgColorHeadline={version}
                   align="left"
+                  as="h2"
                 />
               </div>
             ) : null

package/mobile/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/mobile/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>

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -1,3 +1,5 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
@@ -7,32 +9,29 @@ import { SelectOption } from '../../ui-kit/Select/SelectOption';
 
 export type SafeDepositRentalFormProps = UniBlockProps;
 
-export const SafeDepositRentalForm = ({
-  cities,
-  cellDimensions,
-  cellOptions,
-  days,
-  setDays,
-  context,
-}) => {
-  return (
-    <div className="flex-1 mr-9">
-      {cities.length ? renderCitiesOffices(cities, context) : null}
-      {renderRentalPeriod(days, setDays)}
-      {cellDimensions.length && cellOptions.length
-        ? renderDimensionsOptions(cellDimensions, cellOptions, context)
-        : null}
-      <span className="text-secondary-text text-l-light">Тип договора</span>
-      <div className="flex justify-between items-center mt-5">
-        {renderRadioButtons(context)}
-        <Button text="Офисы на карте" version="primary" />
+// TODO: Добавить типизацию
+
+export const SafeDepositRentalForm = JSX<any>(
+  ({ cities, cellDimensions, cellOptions, days, setDays }) => {
+    return (
+      <div className="flex-1 mr-9">
+        {cities.length ? <CitiesOffices cities={cities} /> : null}
+        {renderRentalPeriod(days, setDays)}
+        {cellDimensions.length && cellOptions.length ? (
+          <DimensionsOptions cellDimensions={cellDimensions} cellOptions={cellOptions} />
+        ) : null}
+        <span className="text-secondary-text text-l-light">Тип договора</span>
+        <div className="flex justify-between items-center mt-5">
+          <RadioButtons />
+          <Button text="Офисы на карте" version="primary" />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
 
-const renderCitiesOffices = (cities, context) => {
-  const [selectedCity, setSelectedCity] = context.useState(cities[0].city);
+const CitiesOffices = JSX<any>(({ cities }) => {
+  const [selectedCity, setSelectedCity] = useState(cities[0].city);
 
   const setSelected = (_) => setSelectedCity(_);
 
@@ -64,11 +63,11 @@ const renderCitiesOffices = (cities, context) => {
       </div>
     </div>
   );
-};
+});
 
-const renderDimensionsOptions = (cellDimensions, cellOptions, context) => {
-  const [selectedDimension, setSelectedDimension] = context.useState(cellDimensions[0].dimension);
-  const [selectedOption, setSelectedOption] = context.useState(cellOptions[0].option);
+const DimensionsOptions = JSX<any>(({ cellDimensions, cellOptions }) => {
+  const [selectedDimension, setSelectedDimension] = useState(cellDimensions[0].dimension);
+  const [selectedOption, setSelectedOption] = useState(cellOptions[0].option);
 
   return (
     <div className="flex justify-between mb-6">
@@ -96,7 +95,7 @@ const renderDimensionsOptions = (cellDimensions, cellOptions, context) => {
       </div>
     </div>
   );
-};
+});
 
 interface SelectProps {
   data: any[];
@@ -138,8 +137,9 @@ export const renderRentalPeriod = (days, setDays) => {
   );
 };
 
-const renderRadioButtons = (context) => {
-  const [selected, setSelected] = context.useState('option1');
+// TODO: В качестве компонента не годится
+const RadioButtons = JSX<any>(() => {
+  const [selected, setSelected] = useState('option1');
   const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelected(_.target.value);
 
   return (
@@ -161,4 +161,4 @@ const renderRadioButtons = (context) => {
       />
     </div>
   );
-};
+});

package/mobile/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -14,9 +15,9 @@ export interface TabsProps extends TabsContent, UniBlockProps {}
 export const Tabs = JSX<TabsProps>((props) => {
   const { context, className, tabs, page, showCounter } = props;
 
-  const [currentTab, setCurrentTab] = context.useState(tabs ? tabs[0] : undefined);
+  const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
-  context.useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
+  useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
 
   const handleClick = (selectedTab: Tab) => {
     EventBus.inst.fire('tab', { label: selectedTab.id });

package/mobile/src/components/Tile/Tile.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import type { TileContent } from './TileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
@@ -11,6 +10,7 @@ import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
+import type { TileContent } from './TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {
   role?: string;
@@ -51,7 +51,7 @@ export const Tile = JSX<TileProps>((props) => {
           title ? (
             <Heading
               headingType={headingType}
-              as="h3"
+              as="h2"
               title={title}
               className={`whitespace-pre-wrap max-w-[600px] text-h4
               ${version === 'primary' ? 'text-primary-text' : ''}`}

package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -41,9 +41,11 @@ exports[`Blocks BonusBenefitsBlock should render block "BonusBenefitsBlock" with
 
 exports[`Blocks Calculator should render block "Calculator" without content 1`] = `
 <section
-  class="box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text "
+  class="box-border overflow-hidden relative font-sans w-100 text-primary-text "
 >
-  <div>
+  <div
+    class="bg-white"
+  >
     <div />
   </div>
   <div
@@ -327,7 +329,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
       </div>
     </div>
     <div
-      class="flex items-start justify-between gap-[54px] xl:gap-5 pt-[3px]"
+      class="flex flex-grow items-start justify-between gap-[54px] xl:gap-5 pt-[3px]"
     />
   </div>
   <div
@@ -914,12 +916,12 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             class="block relative"
           >
             <input
-              class="m-0 mt-[5px] font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 box-border text-primary-text"
+              class="m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
+                        outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus disabled:border-main-stroke disabled:bg-main-divider"
               value="26"
             />
             <div
-              class="absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]"
+              class="absolute inset-x-0 -bottom-1 px-4 leading-[18px]"
             >
               <input
                 class="box-border w-full m-0 cursor-pointer slider"
@@ -933,15 +935,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             </div>
           </label>
           <div
-            class="flex justify-between my-3"
+            class="flex justify-between my-2"
           >
             <span
-              class="text-s leading-[14px] text-secondary-text pl-4"
+              class="text-s-light text-secondary-text"
             >
               От 1 дня
             </span>
             <span
-              class="text-s leading-[14px] text-secondary-text pl-4"
+              class="text-s-light text-secondary-text"
             >
               До 365 дней
             </span>

package/mobile/src/hooks/useExchangeRates.ts

@@ -1,4 +1,4 @@
-import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import type { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeCurrencyCalculator';
 
 interface RatesData {
@@ -7,7 +7,7 @@ interface RatesData {
   rate_sell: number;
 }
 
-export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeCurrencyItem[] {
+export function useExchangeRates(): ExchangeCurrencyItem[] {
   const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
 
   const result = data?.hits?.hits?.map((_) => _._source) || [];

package/mobile/src/hooks/useGeolocation.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { DaDataAPI } from '../api/DaDataAPI';
+
+const DaData = DaDataAPI('https://10.80.4.9');
+
+export function useGeolocation(defaultLocation: string): [string, () => void] {
+  const [city, setCity] = useState(defaultLocation);
+
+  useEffect(() => {
+    setCity(globalThis?.localStorage.getItem('location') || defaultLocation);
+  }, [defaultLocation]);
+
+  const getCity = useCallback(() => {
+    DaData.getFetcherAddress().then((_) => {
+      const location = _ || defaultLocation;
+      globalThis?.localStorage.setItem('location', location);
+      setCity(location);
+    });
+  }, [defaultLocation]);
+
+  return [city, getCity];
+}

package/mobile/src/hooks/useLikeService.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { LikeAPI } from '../api/LikeAPI';
+
+const api = LikeAPI();
+
+export function useLikeService(pagePath: string) {
+  const [likeCount, setLikeCount] = useState(0);
+
+  useEffect(() => {
+    (async () => {
+      const [likeData] = await api.getLikeCount(pagePath);
+      setLikeCount(likeData?.value || 0);
+    })();
+  }, [pagePath]);
+
+  const like = useCallback(async () => {
+    setLikeCount(await api.like(pagePath));
+  }, [pagePath]);
+
+  const dislike = useCallback(async () => {
+    setLikeCount(await api.dislike(pagePath));
+  }, [pagePath]);
+
+  return {
+    likeCount,
+    like,
+    dislike,
+  };
+}

package/mobile/src/hooks/useLink.ts

@@ -3,7 +3,7 @@ import type { LinkProps } from '../model/LinkProps';
 import { adjustHref } from '../utils/adjustHref';
 import { isURL } from '../utils/url';
 
-const defaultHandlerDecorator: HandlerDecorator = (handler) => handler;
+export const defaultHandlerDecorator: HandlerDecorator = (handler) => handler;
 
 export function useLink(
   {

package/mobile/src/hooks/useSafeDepositRental.ts

@@ -1,8 +1,8 @@
-import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 
 const SAFE_DEPOSIT_RENTAL_URL = '/api/v1/safe-deposit-rental.json';
 
-export function useSafeDepositRental(useAsyncData: AsyncDataHook) {
+export function useSafeDepositRental() {
   const { data } = useAsyncData(SAFE_DEPOSIT_RENTAL_URL, fetchSafeDepositRental);
 
   const result = data || [];

package/mobile/src/hooks/useSearch.ts

@@ -0,0 +1,10 @@
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export const useSearch = () => {
+  const [term, setTerm] = useState('');
+
+  return {
+    term,
+    setTerm: (text: string) => setTerm(text),
+  };
+};

package/mobile/src/index.ts

@@ -1,4 +1,5 @@
-export { setup } from '@redneckz/uni-jsx';
+export { setupHooks } from '@redneckz/uni-jsx/lib/hooks';
+export { setup } from '@redneckz/uni-jsx/lib/setup';
 export { DaDataAPI } from './api/DaDataAPI';
 export { LikeAPI } from './api/LikeAPI';
 export { Blocks } from './components/Blocks';

package/mobile/src/react/setup-fixture.ts

@@ -1,19 +1,10 @@
-import { setup } from '@redneckz/uni-jsx';
-import { useEffect, useState } from 'react';
-import runtime from 'react/jsx-runtime';
-import { DaDataAPI } from '../api/DaDataAPI';
+import '@redneckz/uni-jsx/lib/setup.react';
+import { useState } from 'react';
 import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
 import { IntersectionObserverTag } from './IntersectionObserverTag';
 
-const { jsx, jsxs } = runtime as any;
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-setup(jsx, jsxs);
-
 const TEST_ORIGIN = 'http://localhost:5001';
 
-const DaData = DaDataAPI('https://10.80.4.9');
-
 const Router = () => {
   const [href, setHref] = useState<string>(globalThis.location.href);
 
@@ -33,57 +24,13 @@ const Router = () => {
 };
 
 export const context: ContentPageContext = {
-  useState,
   useRouter: Router,
-  useAsyncData: (key, fetcher) => {
-    const [data, setData] = useState<any>();
-    useEffect(() => {
-      fetcher(key).then((_) => {
-        setData(_);
-      });
-    }, [key, fetcher]);
-
-    return { data };
-  },
-  useGeolocation: (defaultLocation) => {
-    const [city, setCity] = useState(
-      globalThis.localStorage.getItem('location') || defaultLocation,
-    );
-
-    const getCity = () => {
-      DaData.getFetcherAddress().then((_) => {
-        const location = _ || defaultLocation;
-        globalThis.localStorage.setItem('location', location);
-        setCity(location);
-      });
-    };
-
-    return [city, getCity];
-  },
-  useLikeService: () => ({
-    likeCount: 0,
-    like: () => {
-      console.log('like');
-    },
-    dislike: () => {
-      console.log('dislike');
-    },
-  }),
   handlerDecorator:
     (handler, targetContent): any =>
     (ev) => {
       ev.preventDefault();
       console.log(ev.target, ev, targetContent);
     },
-  useSearch: () => {
-    const [term, setTerm] = useState('');
-
-    return {
-      term,
-      setTerm: (text: string) => setTerm(text),
-    };
-  },
-  useEffect,
   IntersectionObserverTag,
 };