@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.72

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
 import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { Headline } from '../Headline/Headline';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -12,7 +12,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     context,
     title,
-    subtitle,
+    description,
     icon = { icon: 'DocIconMonoColor' },
     documents,
     orientation = 'vertical',
@@ -22,16 +22,14 @@ export const LinkDocs = JSX<LinkDocsProps>(
       <section
         className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
       >
-        {title ? (
-          <Heading
-            headingType="h2"
-            className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`}
-            title={title}
-          />
-        ) : null}
-        {subtitle ? (
-          <h3 className="mt-0 font-normal mb-5 text-center text-m-md">{subtitle}</h3>
-        ) : null}
+        <Headline
+          className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
+          title={title}
+          description={description}
+          context={context}
+          align="center"
+          headingType="h3"
+        />
         {orientation === 'vertical' ? (
           <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
         ) : (

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -27,7 +27,7 @@ export interface LinkDocsContent {
   /** @title Заголовок */
   title?: string;
   /** @title Описание */
-  subtitle?: string;
+  description?: string;
   /** @title Название иконки */
   icon?: Picture;
   /** @title Список */

package/mobile/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -11,7 +11,7 @@ export interface LinkDocsHorizontalListProps extends LinkDocsVerticalListProps {
 export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
   ({ context, hasBorder = true, documents, icon }) => {
     return (
-      <SwipeListControl context={context} className="text-m-sm text-primary-main">
+      <SwipeListControl context={context} className="text-m-sm text-primary-main mt-5">
         {documents?.length
           ? documents.map((doc, i) => (
               <LinkDocsListItem

package/mobile/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -44,7 +44,9 @@ const formatSuffix = (ext?: string, fileSize?: string) => {
 };
 
 const getExtFromHref = (href: string) => {
-  if (!href) return '';
+  if (!href) {
+    return '';
+  }
 
   const index = href.lastIndexOf('.');
   return index !== -1 ? href.substring(index + 1) : '';

package/mobile/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -13,7 +13,9 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
   ({ hasBorder = true, documents, icon }) => {
     return (
       <div
-        className={`text-m-sm text-primary-main flex flex-col ${hasBorder ? 'gap-3.5' : 'gap-2'}`}
+        className={`text-m-sm text-primary-main flex flex-col mt-5 ${
+          hasBorder ? 'gap-3.5' : 'gap-2'
+        }`}
         role="list"
       >
         {documents?.length

package/mobile/src/components/LinkDocs/linkDocsContentExample.ts

@@ -2,7 +2,7 @@ import type { LinkDocsContent } from './LinkDocsContent';
 
 export const linkDocsContentExample: LinkDocsContent = {
   title: 'Дополнительные документы',
-  subtitle: 'Ответы на часто задаваемые вопросы',
+  description: 'Ответы на часто задаваемые вопросы',
   documents: [
     { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
     { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -50,8 +50,12 @@ const renderShimmer = (size = 3) =>
     .map((_) => Math.floor(_))
     .map(renderShimmerItem);
 
-const renderShimmerItem = (width = 100, index: number) => (
-  <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
+const renderShimmerItem = (width: number, index: number) => (
+  <div
+    key={String(index)}
+    style={{ width: `${width || 100}%` }}
+    className="h-4 mt-2 bg-secondary-light"
+  />
 );
 
 const goldenSequence = (first: number, size: number): number[] =>

package/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -16,11 +16,7 @@
     "alt": "",
     "title": ""
   },
-  "items": [
-    "Элемент списка 1",
-    "Элемент списка 2",
-    "Элемент списка 3"
-  ],
+  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
   "isDotted": true,
   "buttons": [
     {

package/mobile/src/components/ProductBlock/ProductBlockInner.tsx

@@ -56,7 +56,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             {description ? (
               <Description className="mt-3 text-m-md" description={description} />
             ) : null}
-            {benefits?.filter((items) => items.label)?.length ? (
+            {benefits?.filter((_) => _.label)?.length ? (
               <div className="mt-3">
                 {benefits.map((benefit, i) =>
                   renderBenefit({ benefit, version, benefitsVersion }, i),

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -61,7 +61,7 @@ export const ProductTile = JSX<ProductTileProps>(
           {description ? (
             <Description className="mt-4 max-w-[600px]" description={description} />
           ) : null}
-          {renderBenefits(benefits, version)}
+          {renderBenefits(benefits || [], version)}
 
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
@@ -72,7 +72,7 @@ export const ProductTile = JSX<ProductTileProps>(
   },
 );
 
-function renderBenefits(benefits: TextBenefit[] = [], version: BlockVersion) {
+function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div className="flex mt-5 mb-1">
       {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RecommendationCard } from './RecommendationCard';
 import type { RecommendationCardTypes, RecommendationContent } from './RecommendationContent';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
 const CARD_FULL_VIEW_COUNT = 2;
@@ -87,20 +87,12 @@ const renderNavButtons = ({
 
   return (
     <div>
-      {showPrevButton ? (
-        <ArrowButton
-          className="absolute top-1/2 left-8 z-10 mt-6"
-          onClick={handlePrevClick}
-          ariaLabel="Пролистать влево"
-        />
-      ) : null}
-      {showNextButton ? (
-        <ArrowButton
-          className="absolute top-1/2 right-8 z-10 mt-6 rotate-180"
-          onClick={handleNextClick}
-          ariaLabel="Пролистать вправо"
-        />
-      ) : null}
+      {renderArrows({
+        handler: [handlePrevClick, handleNextClick],
+        isShown: [showPrevButton, showNextButton],
+        btnClass: ['left-8', 'right-8'],
+        className: 'top-1/2 mt-6',
+      })}
     </div>
   );
 };

package/mobile/src/components/TariffsTable/TariffsTable.example.json

@@ -83,11 +83,7 @@
           },
           {
             "list": {
-              "items": [
-                "item 1",
-                "item 2",
-                "item 3"
-              ]
+              "items": ["item 1", "item 2", "item 3"]
             }
           }
         ]

package/mobile/src/components/Tile/Tile.example.json

@@ -11,6 +11,7 @@
     "alt": "",
     "title": ""
   },
+  "isDotted": true,
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {

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

@@ -30,6 +30,7 @@ export const Tile = JSX<TileProps>((props) => {
     children,
     buttons,
     image,
+    isDotted = true,
     className = '',
     version = 'primary',
     role,
@@ -75,16 +76,17 @@ export const Tile = JSX<TileProps>((props) => {
           />
         ) : null}
         {children}
-        {renderList(items, version)}
+        {renderList(items, version, isDotted)}
       </BaseTile>
     </section>
   );
 });
 
-function renderList(items, version) {
+function renderList(items, version, isDotted: boolean) {
   return items?.length ? (
     <List
       items={items}
+      isDotted={isDotted}
       itemClassName="text-title-2xs font-light mt-2"
       version={version === 'primary' ? 'tile' : 'tile-white'}
     />

package/mobile/src/components/Tile/TileContent.ts

@@ -14,5 +14,10 @@ export type TileContent = HeadingContent &
   ListContent &
   ButtonContent &
   ImageContent & {
+    /**
+     *  @title Буллиты
+     *  @default true
+     */
+    isDotted?: boolean;
     version?: BlockVersion;
   };

package/mobile/src/content-page-repository/mapJSON.ts

@@ -1,23 +1,27 @@
 export async function mapJSON<T>(
   data: T,
   mapper: <In, Out = In>(value: In, key: string[]) => Promise<Out>,
-  key: string[] = [],
+  keyParts: string[] = [],
 ): Promise<T> {
-  if (data === null || data === undefined) return data;
+  if (data === null || data === undefined) {
+    return data;
+  }
 
-  const mappedData = await mapper(data, key);
-  if (mappedData !== data) return mappedData as T;
+  const mappedData = await mapper(data, keyParts);
+  if (mappedData !== data) {
+    return mappedData as T;
+  }
 
   if (Array.isArray(data)) {
-    const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(key)));
+    const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(keyParts)));
     return Promise.all(values) as any;
   } else if (typeof data === 'object' && (data as any).toString() === '[object Object]') {
     const subKeys = Object.keys(data as any);
-    const values = subKeys.map((k) => mapJSON(data[k], mapper, [k].concat(key)));
+    const values = subKeys.map((k) => mapJSON(data[k], mapper, [k].concat(keyParts)));
     const pairs = (await Promise.all(values)).map((_, i) => ({
       [subKeys[i]]: _,
     }));
     return Object.assign({}, ...pairs);
   }
-  return mapper<T>(data, key);
+  return mapper<T>(data, keyParts);
 }

package/mobile/src/content-page-repository/transformMarkdown.ts

@@ -3,7 +3,9 @@ import remarkParse from 'remark-parse';
 import remarkHtml from 'remark-html';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
-  if (!markdown) return '';
+  if (!markdown) {
+    return '';
+  }
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
   return result.toString('utf-8');

package/mobile/src/content-page-repository/transformPicture.ts

@@ -36,12 +36,15 @@ async function transformImg(
 
   const imgPath = `${path.dirname(pagePath)}/${src}`;
   let chain = sharp(imgPath);
-  if (size)
+  if (size) {
     chain = chain.resize(size?.width, size?.height, {
       fit: sharp.fit.contain,
       background: [0, 0, 0, 0],
     });
-  if (format) chain = chain.toFormat(format, options);
+  }
+  if (format) {
+    chain = chain.toFormat(format, options);
+  }
 
   const transformedSrc = transformSrc(src, transformationOptions);
   const transformedImgPath = `${publicDir}/${path.relative(
@@ -62,7 +65,9 @@ async function transformImg(
 
 function transformSrc(src: string, { format, size }: TransformationOptions & ImgSource): string {
   const noTransform = !format && !size;
-  if (noTransform) return src;
+  if (noTransform) {
+    return src;
+  }
 
   const suffix = [size?.width, size?.height].filter(Boolean).join('-');
   return `${path.basename(src, path.extname(src))}${suffix ? `-${suffix}` : ''}.${

package/mobile/src/hooks/useCreditCalculatorData.ts

@@ -1,15 +1,14 @@
 import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
-import { CreditCalculatorData } from '../components/CreditCalculator/CreditCalculatorContent';
 
 export function useCreditCalculatorData(
   useAsyncData: AsyncDataHook,
   directoryName: string | undefined,
-): CreditCalculatorData {
+): any {
   const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
   return data || {};
 }
 
-async function fetchCreditCalculatorData(url: string): Promise<CreditCalculatorData> {
+async function fetchCreditCalculatorData(url: string): Promise<any> {
   const response = await fetch(url);
   return await response.json();
 }

package/mobile/src/hooks/useExchangeRates.ts

@@ -1,25 +1,85 @@
 import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
-import { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeRateTileContent';
+import type { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeCurrencyCalculator';
 
-interface ExchangeRatesData {
-  exchangeRate?: {
-    currencies?: ExchangeCurrencyItem[];
-  };
+interface RatesData {
+  code: string;
+  rate_buy: number;
+  rate_sell: number;
 }
 
-export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeRatesData {
+export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeCurrencyItem[] {
   const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
 
-  return data || {};
+  const result = data?.hits?.hits?.map((_) => _._source) || [];
+  return result.length ? getCurrencyListByRate(result) : result;
 }
 
-async function fetchExchangeRates(): Promise<ExchangeRatesData | undefined> {
+async function fetchExchangeRates(): Promise<any | undefined> {
   try {
-    const response = await fetch(EXCHANGE_RATES_URL);
+    const response = await fetch(EXCHANGE_RATES_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(EXCHANGE_RATES_BODY),
+    });
     return await response.json();
   } catch (err) {
     console.error(err);
   }
 }
 
-const EXCHANGE_RATES_URL = '/api/v1/exchangerates.json';
+const EXCHANGE_RATES_URL =
+  'https://coins.rshb.ru/api/catalog/vue_storefront_magento_1_currency_rates_average/currency_rates_average/_search?size=10000';
+
+const EXCHANGE_RATES_BODY = {
+  query: {
+    bool: {
+      must: [
+        {
+          term: {
+            // eslint-disable-next-line camelcase
+            russian_region_code: '77',
+          },
+        },
+        {
+          term: {
+            // eslint-disable-next-line camelcase
+            from_volume: '0',
+          },
+        },
+        {
+          terms: {
+            // eslint-disable-next-line camelcase
+            currency_pair: ['USD/RUB', 'EUR/RUB'],
+          },
+        },
+      ],
+    },
+  },
+};
+
+interface FormatRatesData {
+  code: string;
+  buy?: number;
+  sell?: number;
+}
+
+const getCurrencyListByRate = (currencyRates: RatesData[]) =>
+  currencyRates.reduce((result: FormatRatesData[], _) => {
+    const currencyInfo = _['currency_first'];
+    if (!validateRate(_['rate_buy']) && !validateRate(_['rate_sell'])) {
+      return result;
+    }
+    const currencyCode = currencyInfo.code;
+    if (!result.some((i) => i.code === currencyCode)) {
+      result.push({
+        code: currencyCode,
+        buy: Number(_.rate_buy),
+        sell: Number(_.rate_sell),
+      });
+    }
+    return result;
+  }, []);
+
+const validateRate = (value) => Math.round(value) > 0;

package/mobile/src/hooks/useTableArrowScrollControl.ts

@@ -11,12 +11,12 @@ export const useTableArrowScrollControl = ({
   activeCardIndex: number;
   setActiveCardIndex: (_: number) => void;
 }): Required<TableArrowScrollControlProps> => {
-  const onNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const onPrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
 
   const isScrollAvailable = columnsLength > colsLengthForScroll;
   const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
   const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
 
-  return { onNextClick, onPrevClick, isScrollAvailable, showNextButton, showPrevButton };
+  return { handleNextClick, handlePrevClick, isScrollAvailable, showNextButton, showPrevButton };
 };

package/mobile/src/react/IntersectionObserverTag.tsx

@@ -0,0 +1,23 @@
+import { useCallback, useRef } from 'react';
+import { IntersectionObserverComponent } from '../components/ContentPage/ContentPageContext';
+
+export const IntersectionObserverTag: IntersectionObserverComponent = (props) => {
+  const { Tag, observerCallback, observerOptions, children, ...rest } = props;
+
+  const intersectionObserver = useRef<IntersectionObserver>();
+  const ref = useCallback(
+    (tag: HTMLElement | null | undefined) => {
+      if (tag && !intersectionObserver.current) {
+        intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
+        intersectionObserver.current.observe(tag);
+      }
+    },
+    [observerCallback, observerOptions],
+  );
+
+  return (
+    <Tag ref={ref} {...rest}>
+      {children}
+    </Tag>
+  );
+};

package/mobile/src/{setup-fixture.ts → react/setup-fixture.ts}

@@ -2,8 +2,9 @@ import { setup } from '@redneckz/uni-jsx';
 
 import { useEffect, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { DaDataAPI } from './api/DaDataAPI';
-import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
+import { DaDataAPI } from '../api/DaDataAPI';
+import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 setup(jsx, jsxs);
 
@@ -28,6 +29,7 @@ const Router = () => {
     },
   };
 };
+
 export const context: ContentPageContext = {
   useState,
   useRouter: Router,
@@ -78,6 +80,7 @@ export const context: ContentPageContext = {
       setTerm: (text: string) => setTerm(text),
     };
   },
+  IntersectionObserverTag,
 };
 
 export const mobileContext: ContentPageContext = {

package/mobile/src/services/sitemap/isHrefActive.ts

@@ -4,7 +4,8 @@ import { withoutMobilePath } from '../../utils/withoutMobilePath';
 export const isHrefActive = (
   href: string | undefined,
   router: { pathname?: string; href?: string },
-  cmp: (href: string, baseHref: string) => boolean = (href, baseHref) => baseHref.startsWith(href),
+  cmp: (targetHref: string, baseHref: string) => boolean = (targetHref, baseHref) =>
+    baseHref.startsWith(targetHref),
 ) => {
   return cmp(
     withoutQuery(href),

package/mobile/src/ui-kit/Button/ArrowButton.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonProps } from './ButtonProps';
 import { Button } from './Button';
-import { ButtonProps } from './ButtonProps';
 import { Img } from '../Img/Img';
 
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (

package/mobile/src/ui-kit/Button/ButtonSection.tsx

@@ -20,7 +20,9 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 });
 
 function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
-  if (!button?.text) return;
+  if (!button?.text) {
+    return;
+  }
 
   return icon ? (
     <Button

package/mobile/src/ui-kit/Button/renderArrows.tsx

@@ -0,0 +1,41 @@
+import { ArrowButton } from './ArrowButton';
+import type { FuncReturnVoid } from '../../types';
+
+type renderArrowsProps = {
+  handler: FuncReturnVoid<MouseEvent>[];
+  isShown: [boolean, boolean];
+  btnClass: [string, string];
+  className?: string;
+  isDisabled?: boolean;
+};
+
+export function renderArrows({
+  handler,
+  isShown,
+  btnClass,
+  className = '',
+  isDisabled = false,
+}: renderArrowsProps) {
+  return (
+    <div>
+      {isShown[0] || isDisabled ? (
+        <ArrowButton
+          className={`absolute z-10 ${btnClass[0]} ${className}`}
+          onClick={handler[0]}
+          ariaLabel="Пролистать влево"
+          data-block-control="scroll-left"
+          disabled={!isShown[0]}
+        />
+      ) : null}
+      {isShown[1] || isDisabled ? (
+        <ArrowButton
+          className={`absolute z-10 rotate-180 ${btnClass[1]} ${className}`}
+          onClick={handler[1]}
+          ariaLabel="Пролистать вправо"
+          data-block-control="scroll-right"
+          disabled={!isShown[1]}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -13,6 +13,7 @@ export const Img = JSX<ImageProps<Image>>(
       return (
         <Icon
           className={className}
+          imageClassName={imageClassName}
           iconVersion={getIconVersion(image)}
           name={icon}
           {...iconProps}

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

@@ -1,8 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { InputProps } from './InputProps';
+import { ChangeEvent } from 'react';
 
-export const Input = JSX<InputProps>(({ className = '', id, name, type = 'text', placeholder }) => {
-  return (
-    <input className={className} id={id} name={name || id} type={type} placeholder={placeholder} />
-  );
-});
+export const Input = JSX<InputProps>(
+  ({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const validInputValue = e.target.validity.valid ? e.target.value : value;
+      onChange(validInputValue);
+    };
+    return (
+      <input
+        className={className}
+        id={id}
+        name={name || id}
+        type={type}
+        pattern={pattern}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => handleChange(e)}
+      />
+    );
+  },
+);

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

@@ -6,4 +6,7 @@ export interface InputProps {
   name?: string;
   type?: InputTypes;
   placeholder?: string;
+  pattern?: string;
+  value: string;
+  onChange: (value: string) => void;
 }