@redneckz/wildless-cms-uni-blocks 0.3.85 → 0.3.86

package/mobile/src/hooks/useLink.ts

@@ -18,11 +18,11 @@ export function useLink(
     ...link,
     href,
     'aria-label': link.text,
-    onClick: handlerDecorator((ev: MouseEvent) => {
+    onClick: handlerDecorator((ev?: { preventDefault: () => void }) => {
       const isLocalHref = href && !isURL(href);
       const isLocalTarget = !link.target || link.target === '_self';
       if (isLocalHref && isLocalTarget) {
-        ev.preventDefault();
+        ev?.preventDefault();
         router.push(href);
       }
     }, link),

package/mobile/src/model/HeadlineType.ts

@@ -0,0 +1,21 @@
+/**
+ * @title Размер заголовка
+ * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький"]
+ */
+export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S';
+
+export type TitleProp = {
+  /** @title Заголовок */
+  title?: string;
+};
+
+export type DescriptionProp = {
+  /** @title Описание */
+  description?: string;
+};
+
+export type HeadlineCommonProps = TitleProp & DescriptionProp;
+
+export type HeadlineProps = HeadlineCommonProps & {
+  headlineVersion?: HeadlineVersion;
+};

package/mobile/src/model/VNode.ts

@@ -1 +1 @@
-export type VNode = unknown;
+export type VNode = any;

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

@@ -5,10 +5,10 @@ import { isSubItemActive } from './isSubItemActive';
 
 export const findActiveSubItem =
   (router: Router) =>
-  <T extends LinkProps>(items: T[] = []): T | null => {
+  <T extends LinkProps>(items: T[] = []): T | undefined => {
     const possibleActiveSubItems = items?.filter(isSubItemActive(router));
 
     return possibleActiveSubItems?.length
       ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-      : null;
+      : undefined;
   };

package/mobile/src/types.ts

@@ -72,5 +72,3 @@ export interface DaDataSuggestion<T> {
 export interface DaDataAddress {
   city?: string | null;
 }
-
-export type FuncReturnVoid<Input = unknown> = (value: Input) => void;

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

@@ -3,7 +3,7 @@ import type { LinkProps } from '../model/LinkProps';
 
 export interface BreadcrumbProps extends LinkProps {
   className?: string;
-  onClick?: (ev: MouseEvent) => any;
+  onClick?: () => void;
 }
 
 export const Breadcrumb = JSX<BreadcrumbProps>(

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

@@ -3,8 +3,8 @@
 
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
 import { ButtonInner } from './ButtonInner';
+import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
@@ -55,7 +55,7 @@ export const Button = JSX<ButtonCommonProps>(
           role="button"
           aria-disabled="true"
           aria-label={ariaLabel}
-          tabIndex="-1"
+          tabIndex={-1}
           className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
             rounded ? 'rounded-full' : 'rounded-md'
           } ${className || ''}`}

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

@@ -14,8 +14,8 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {appendLeft ? appendLeft : null}
       {isWithText(props) ? (
         <div>
-          <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-base text-left">{text}</div>
+          <div className="text-xs text-left">{aboveText}</div>
+          <div className={`text-left ${aboveText ? 'text-s -mt-0.5' : 'text-base'}`}>{text}</div>
         </div>
       ) : null}
       {appendRight ? appendRight : null}
@@ -30,7 +30,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `px-9 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
+  const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
 
   return [
     'flex items-center justify-center',

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -10,7 +10,7 @@ export interface ButtonAdditionalProps {
   disabled?: boolean;
   rel?: string;
   ariaLabel?: string;
-  onClick?: (ev: MouseEvent) => any;
+  onClick?: (ev?: { preventDefault: () => void }) => void;
 }
 
 /**

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

@@ -11,7 +11,7 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
   const { handlerDecorator } = context;
   const router = context.useRouter();
 
-  return buttons?.length ? (
+  return buttons && buttons?.length ? (
     <div className={className}>
       {buttons.map((button, index) =>
         renderButton(useLink({ router, handlerDecorator }, button), index),

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

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 
 export interface LikeButtonProps {
   className?: string;
-  onClick?: (ev: MouseEvent) => any;
+  onClick?: () => void;
   ariaLabel?: string;
 }
 

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

@@ -1,8 +1,7 @@
 import { ArrowButton } from './ArrowButton';
-import type { FuncReturnVoid } from '../../types';
 
-type renderArrowsProps = {
-  handler: FuncReturnVoid<MouseEvent>[];
+export type renderArrowsProps = {
+  handler: [() => void, () => void];
   isShown: [boolean, boolean];
   btnClass: [string, string];
   className?: string;

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

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { DescriptionContent } from './DescriptionContent';
+import type { DescriptionProp } from '../../model/HeadlineType';
 
-export interface DescriptionProps extends DescriptionContent {
+export interface DescriptionProps extends DescriptionProp {
   className?: string;
 }
 
 export const Description = JSX<DescriptionProps>((props) => {
   const { className = '', description } = props;
 
-  return <div className={`font-normal text-base ${className}`}>{description}</div>;
+  return <div className={`${className}`}>{description}</div>;
 });

package/mobile/src/ui-kit/Foldable/useActiveHandler.ts

@@ -12,7 +12,7 @@ export const useActiveHandler = ({ context, initialState = false }: ActiveHandle
   const [isActive, setIsActive] = context.useState(initialState);
   const icon: IconName = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
 
-  const handleToggle = (e: MouseEvent) => {
+  const handleToggle = (e) => {
     const currentTarget = e.currentTarget as HTMLElement;
 
     if (!currentTarget) {

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

@@ -1,12 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingContent';
-
-export interface HeadingProps extends HeadingContent, HeadingTypeContent {
-  className?: string;
-  as?: HeadingType;
-}
+import type { HeadingProps, HeadingType } from './HeadingProps';
 
 const HeadingClass: Record<HeadingType, string> = {
+  h0: 'text-m-title',
   h1: 'text-m-title',
   h2: 'text-m-title',
   h3: 'text-m-title-md',
@@ -16,13 +12,7 @@ const HeadingClass: Record<HeadingType, string> = {
 };
 
 export const Heading = JSX<HeadingProps>((props) => {
-  const { className, headingType, title, as } = props;
-
-  if (!headingType) {
-    return null;
-  }
-
-  const Tag = as || headingType;
+  const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
 
   return (
     <Tag className={`font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`}>

package/mobile/src/ui-kit/Heading/HeadingProps.ts

@@ -0,0 +1,24 @@
+import type { TitleProp } from '../../model/HeadlineType';
+
+/**
+ *
+ * @title Размер заголовка
+ * @enumNames [
+ *   "h0", "h1", "h2", "h3", "h4", "h5", "h6"
+ * ]
+ */
+export type HeadingType = 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/**
+ * @hidden
+ */
+export type HeadingTagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface HeadingCommonProps extends TitleProp {
+  as?: HeadingTagType;
+  headingType?: HeadingType;
+}
+
+export interface HeadingProps extends HeadingCommonProps {
+  className?: string;
+}

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,5 +1,3 @@
-import type { FuncReturnVoid } from '../../types';
-
 export interface InputRangeProps {
   className?: string;
   items?: string[];
@@ -8,5 +6,5 @@ export interface InputRangeProps {
   step?: number;
   value?: number;
   title?: string;
-  onChange?: FuncReturnVoid<number>;
+  onChange?: (value: number) => void;
 }

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

@@ -3,8 +3,8 @@ import { JSX } from '@redneckz/uni-jsx';
 interface SVGPathOptions {
   fill?: string;
   stroke?: string;
-  strokeLinecap?: string;
-  strokeLinejoin?: string;
+  strokeLinecap?: 'inherit' | 'butt' | 'round' | 'square';
+  strokeLinejoin?: 'inherit' | 'round' | 'miter' | 'bevel';
   strokeWidth?: string;
   strokeMiterlimit?: string;
 }

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

@@ -16,7 +16,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(
     const SearchBarInputClassName = isMobile
       ? ' placeholder-transparent font-normal'
       : 'font-light h-full';
-    const inputPlaceholder = isMobile ? 'some search' : null;
+    const inputPlaceholder = isMobile ? 'some search' : undefined;
 
     return (
       <form className={`font-sans relative ${className}`}>
@@ -58,8 +58,8 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(
             version="primary"
             text="Найти"
             className="invisible peer-focus:visible absolute top-1 right-1"
-            onClick={(e) => {
-              e.preventDefault();
+            onClick={(ev) => {
+              ev?.preventDefault();
               console.log('click');
             }}
           >

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.ts

@@ -1,9 +1,7 @@
-import { FuncReturnVoid } from '../../types';
-
 export interface TableArrowScrollControlProps {
   isScrollAvailable?: boolean;
-  handleNextClick: FuncReturnVoid<MouseEvent>;
-  handlePrevClick: FuncReturnVoid<MouseEvent>;
+  handleNextClick: () => void;
+  handlePrevClick: () => void;
   showNextButton: boolean;
   showPrevButton: boolean;
 }

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import { FuncReturnVoid } from '../../types';
 
 /**
  * @title Вкладка
@@ -12,7 +11,7 @@ export interface Tab {
   icon?: Picture;
 }
 
-export type TabClickHandler = FuncReturnVoid<number>;
+export type TabClickHandler = (tabIndex: number) => void;
 
 export interface TabsProps {
   tabs?: Tab[];

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

@@ -10,7 +10,7 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   ariaLabel?: string;
-  onClick?: (ev: MouseEvent) => any;
+  onClick?: () => void;
   bgColor?: BgColorVersion;
   dataItemName?: string;
 }

package/mobile/src/utils/url.ts

@@ -24,3 +24,5 @@ export const getHash = (href?: string) => {
 
   return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
 };
+
+export const isHash = (href?: string) => href?.startsWith('#');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.85",
+  "version": "0.3.86",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -104,6 +104,7 @@
     "clean:actual": "rimraf ./cypress/snapshots/actual || exit 0"
   },
   "peerDependencies": {
+    "@testing-library/react": "^12.1.5",
     "cypress": "^10.6.0",
     "cypress-visual-regression": "^1.7.0",
     "react": ">=16.8.0",
@@ -137,6 +138,7 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
+    "jest-environment-jsdom": "^29.0.3",
     "lint-staged": "^13.0.1",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",

package/src/components/Accordion/useActiveHandler.ts

@@ -6,17 +6,17 @@ export const useActiveHandler = ({ context, blocks, initialState = false }: Acti
   const hasContent = blocks?.length;
   const icon: IconName = isActive ? 'MinusIcon' : 'PlusIcon';
 
-  const getContentBlock = ({ currentTarget }) => currentTarget.nextSibling;
+  const handleToggle = (e) => {
+    const currentTarget = e.currentTarget as HTMLElement;
 
-  const handleToggle = (e: MouseEvent) => {
-    if (!hasContent) {
+    if (!currentTarget) {
       return;
     }
 
     setIsActive(!isActive);
-    const contentBlock = getContentBlock(e);
+    const contentBlock = currentTarget.nextSibling as HTMLElement;
     contentBlock.style.maxHeight = contentBlock.style.maxHeight
-      ? null
+      ? ''
       : `${contentBlock.scrollHeight}px`;
   };
 

package/src/components/BaseTile/BaseTile.tsx

@@ -5,7 +5,7 @@ import type { BaseTileCommonProps } from './BaseTileProps';
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 export const BaseTile = JSX<BaseTileProps>(
-  ({ className = '', title, children, buttons, image }) => {
+  ({ className = '', title = '', children, buttons, image }) => {
     return (
       <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}

package/src/components/BaseTile/BaseTileProps.ts

@@ -1,39 +1,16 @@
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { HeadingType } from '../../ui-kit/Heading/HeadingContent';
 import type { AlignType } from '../../model/AlignType';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadingType } from '../../ui-kit/Heading/HeadingProps';
+import type { VNode } from '../../model/VNode';
 
-/**
- * @title Общий компонент плиток
- */
-export type BaseTileCommonProps = BaseTileTitleProps & BaseTileMainProps;
-
-/**
- * @title Заголовк плитки
- */
-export interface BaseTileTitleProps {
-  /** @title Заголовок */
-  title?: string;
-  /**
-   * @title Тип заголовка
-   */
+export interface BaseTileCommonProps {
+  title?: VNode;
   headingType?: HeadingType;
-}
-
-export interface BaseTileMainProps {
   description?: string;
-  image?: Picture;
-  /** @title Список */
+  image?: VNode;
   items?: string[];
-
   list?: string;
-
-  /**
-   * @title Кнопки
-   * @maxItems 4
-   */
-  buttons?: ButtonWithIconProps[];
+  buttons?: VNode;
   version?: BlockVersion;
   align?: AlignType;
 }

package/src/components/BaseTile/getTileHeadingType.ts

@@ -3,10 +3,10 @@ import { getColSpan } from '../../utils/getColSpan';
 export function getTileHeadingType(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 4) {
-    return 'h4';
+    return 'S';
   } else if (colSpan <= 8) {
-    return 'h3';
+    return 'M';
   } else {
-    return 'h2';
+    return 'L';
   }
 }

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { EmptyOption } from '../../model/EmptyOptionType';
 
 /**
@@ -48,11 +48,10 @@ export interface BenefitItem {
 /**
  * @title Блок преимущества
  */
-export type BenefitsBlockContent = HeadingContent &
-  HeadingTypeContent & {
-    /**
-     * @title Список преимуществ
-     * @maxItems 6
-     */
-    benefitList?: BenefitItem[];
-  };
+export type BenefitsBlockContent = HeadingCommonProps & {
+  /**
+   * @title Список преимуществ
+   * @maxItems 6
+   */
+  benefitList?: BenefitItem[];
+};

package/src/components/Blocks.spec.tsx

@@ -0,0 +1,74 @@
+import { setup } from '@redneckz/uni-jsx';
+import { render } from '@testing-library/react';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Blocks } from './Blocks';
+import type { ContentPageContext } from './ContentPage/ContentPageContext';
+
+setup(jsx, jsxs);
+
+jest.mock('../ui-kit/BlockWrapper', () => ({
+  __esModule: true,
+  BlockWrapper: ({ children }) => <section>{children}</section>,
+}));
+
+const emptyFn = () => {
+  /* For sure */
+};
+
+const context: ContentPageContext = {
+  useState,
+  useRouter: () => ({
+    pathname: '/credits',
+    query: {},
+    push: emptyFn,
+    replace: emptyFn,
+  }),
+  useAsyncData: () => ({}),
+  useGeolocation: (defaultLocation) => [defaultLocation, emptyFn],
+  useLikeService: () => ({
+    likeCount: 0,
+    like: emptyFn,
+    dislike: emptyFn,
+  }),
+  handlerDecorator: (): any => emptyFn,
+  useSearch: () => ({
+    term: '',
+    setTerm: emptyFn,
+  }),
+  IntersectionObserverTag: ({ children }) => children,
+};
+
+describe('Blocks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  for (const [key, BlockComponent] of Object.entries(Blocks)) {
+    describe(key, () => {
+      it(`should render block "${key}" without content`, () => {
+        expect.assertions(2);
+
+        const { container } = render(<BlockComponent context={context} />);
+        expect(container.firstChild).toBeTruthy();
+        expect(container.firstChild).toMatchSnapshot();
+      });
+
+      it(`should render block "${key}" with demo content`, async () => {
+        expect.assertions(1);
+
+        let data = {};
+
+        try {
+          const { default: example } = await import(`./${key}/${key}.example.json`);
+          data = example;
+        } catch (ex) {
+          // Do nothing
+        }
+
+        const { container } = render(<BlockComponent context={context} {...data} />);
+        expect(container.firstChild).toBeTruthy();
+      });
+    });
+  }
+});

package/src/components/Bonus/BonusContent.ts

@@ -1,5 +1,4 @@
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /** @title Плитка */
 interface BonusItems {
@@ -16,8 +15,7 @@ interface BonusItems {
 /**
  * @title Блок Бонусы
  */
-export type BonusContent = HeadingContent &
-  DescriptionContent & {
-    /** @title Список плиток */
-    bonusItems?: BonusItems[];
-  };
+export type BonusContent = HeadlineCommonProps & {
+  /** @title Список плиток */
+  bonusItems?: BonusItems[];
+};

package/src/components/Calculator/Calculator.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { FuncReturnVoid, UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
@@ -12,14 +12,14 @@ type TabsProps = {
   tabsShift: number;
   tabsNav: CalculatorNav[];
   activeSlideIndex: number;
-  setActiveSlideIndex: FuncReturnVoid<number>;
+  setActiveSlideIndex: (index: number) => void;
 };
 
 type NavButtonProps = {
   tab: CalculatorNav;
   i: number;
   activeSlideIndex: number;
-  onClick: FuncReturnVoid<MouseEvent>;
+  onClick: () => void;
 };
 
 export const Calculator = JSX<CalculatorProps>(

package/src/components/Calculator/Rate.tsx

@@ -12,7 +12,7 @@ export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBl
     <div className="text-sm font-light ml-3">{title}</div>
     <div className="flex justify-start">
       <span
-        className={`block calc-rate-text font-mohave text-highlighted pr-6 -mt-4 ${rateBlockClassName}`}
+        className={`block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
       >
         {String(rate).replace('.', ',')}
       </span>

package/src/components/Catalog/CatalogContent.ts

@@ -1,14 +1,13 @@
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @enumNames ["Черный", "Белый"]
  */
 export type CatalogProductColor = 'black' | 'white';
 
-export interface CatalogCardType extends HeadingContent, DescriptionContent, ImageContent {
+export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
   /** @title Цена в рублях */
   price?: number;
   /** @title Доступные цвета */
@@ -20,8 +19,7 @@ export interface CatalogCardType extends HeadingContent, DescriptionContent, Ima
 /**
  * @title Каталог
  */
-export type CatalogContent = HeadingContent &
-  DescriptionContent & {
-    /** @title Список карточек */
-    cards?: CatalogCardType[];
-  };
+export type CatalogContent = HeadlineCommonProps & {
+  /** @title Список карточек */
+  cards?: CatalogCardType[];
+};