@redneckz/wildless-cms-uni-blocks 0.2.115 → 0.2.116

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -0,0 +1,41 @@
+/*
+ Calculates array of breakpoints for each scrollable element in container.
+ Returns array of tuples consisting of [start, end] boundary scrollLeft values.
+*/
+export const getScrollPoints = ({
+  gap,
+  padding,
+  clientWidth,
+  scrollWidth,
+  childElementCount,
+  itemWidth,
+}: {
+  gap: number;
+  padding: number;
+  clientWidth: number;
+  scrollWidth: number;
+  childElementCount: number;
+  itemWidth: number;
+}) => {
+  const scrollItemWidth = itemWidth + gap;
+  const scrollableDistance = scrollWidth - clientWidth;
+  const edgeScrollDistance = clientWidth - gap - padding;
+
+  const lastScrollableIdx = childElementCount - 2;
+  const scrollPoints: [number, number][] = new Array(childElementCount)
+    .fill(0)
+    .map((_, idx) =>
+      idx === 0 || idx === lastScrollableIdx
+        ? [
+            idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
+            idx > 0 ? scrollableDistance : edgeScrollDistance,
+          ]
+        : [
+            (idx - 1) * scrollItemWidth + edgeScrollDistance,
+            idx * scrollItemWidth + edgeScrollDistance,
+          ],
+    );
+  scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
+
+  return scrollPoints;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.115",
+  "version": "0.2.116",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -8,6 +8,10 @@
   "type": "module",
   "main": "./dist/index.js",
   "types": "./lib/index.d.ts",
+  "engines": {
+    "npm": ">=7.0.0",
+    "node": ">=16.0.0"
+  },
   "exports": {
     ".": {
       "import": "./lib/index.js",
@@ -73,27 +77,24 @@
     "start": "npm run cosmos",
     "start:mobile": "npm run cosmos:mobile",
     "prebuild": "rimraf ./mobile/src",
-    "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:design && npm run build:mobile",
+    "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:design && npm run size && npm run build:mobile",
     "prebuild:mobile": "rimraf ./mobile/src && node ./scripts/prebuild-mobile.js ./src ./mobile",
     "build:mobile": "npm run --prefix ./mobile build",
-    "postbuild": "npm run size",
     "build:design": "npm run cosmos:export || exit 0",
     "postbuild:design": "copyfiles --up 1 \"./docs/**/*\" ./build || exit 0",
     "build:lib": "rimraf ./lib && tsc --build --verbose",
-    "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
+    "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs",
     "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir ./dist",
     "bundle": "rimraf ./bundle && rollup --config rollup.config.js && npm run build:schema",
-    "build:schema": "ts-json-schema-generator --path './src/**/*Content.ts' --additional-properties --unstable --validation-keywords enumNames --validation-keywords required --minify --no-type-check -o ./bundle/blocks.schema.json",
-    "postbuild:schema": "node ./scripts/sort-json-schema.js ./bundle/blocks.schema.json",
+    "prebuild:schema": "npm run build:icons",
+    "build:schema": "node ./scripts/build-schema.js ./bundle/blocks.schema.json",
     "build:style": "postcss ./src/**/*.css --env production --dir ./lib",
-    "build:icons": "svgo -f ./src/icons -o ./cosmos-static/icons",
+    "build:icons": "node ./scripts/prepare-icons.js ./src/icons ./cosmos-static/icons > ./src/icons/IconName.ts",
     "size": "size-limit",
     "lint": "eslint ./src",
     "pretest": "npm run lint",
     "test": "jest --coverage",
-    "precosmos": "npm run build:icons",
     "cosmos": "cosmos",
-    "precosmos:mobile": "npm run build:icons",
     "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
     "precosmos:export": "npm run build:icons",
     "cosmos:export": "rimraf ./build && cosmos-export && cosmos-export --config cosmos.config.mobile.json",
@@ -123,14 +124,14 @@
     "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.11",
-    "eslint": "^8.19.0",
+    "eslint": "^8.21.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-local-eslint-rules": "./eslint-rules",
+    "eslint-plugin-react": "^7.30.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
     "lint-staged": "^13.0.1",
-    "npm-watch": "^0.11.0",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
     "postcss-loader": "^7.0.0",
@@ -162,13 +163,11 @@
     }
   ],
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,css}": [
-      "prettier --write"
-    ],
     "src/**/*.{js,jsx,ts,tsx}": [
       "eslint"
     ],
-    "*.{js,jsx,ts,tsx,css,json}": [
+    "src/**/*.{js,jsx,ts,tsx,css}": [
+      "prettier --write",
       "npm run cosmos:export",
       "git add ./docs"
     ]

package/src/components/Accordion/Accordion.fixture.mobile.tsx

@@ -1,6 +1,6 @@
 import { context } from '../../setup-fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LINK_DOCS } from '../LinkDocs/LinkDocs.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
@@ -29,7 +29,7 @@ const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
 
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
   accordionBlockType: 'LinkDocs',
-  ...LINK_DOCS,
+  ...linkDocsContentExample,
   title: '',
 };
 

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,6 +1,6 @@
 import { context } from '../../setup-fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LINK_DOCS } from '../LinkDocs/LinkDocs.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
@@ -29,7 +29,7 @@ const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
 
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
   accordionBlockType: 'LinkDocs',
-  ...LINK_DOCS,
+  ...linkDocsContentExample,
   title: '',
 };
 

package/src/components/Accordion/Accordion.mobile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 
@@ -14,11 +14,7 @@ export const Accordion = JSX<AccordionProps>(
           bordered ? 'px-4' : ''
         } ${className}`}
       >
-        {title ? (
-          <Title className="m-0 mb-2 font-medium text-center" size="M">
-            {title}
-          </Title>
-        ) : null}
+        {title ? <Heading type="h3" className="mb-2 text-center" text={title} /> : null}
         {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">

package/src/components/Accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 
@@ -9,7 +9,7 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 export const Accordion = JSX<AccordionProps>(({ title, accordionItems, context, className }) => {
   return (
     <section className={`p-[50px] font-sans bg-white text-primary-text ${className || ''}`}>
-      {title ? <Title className="m-0 mb-2.5">{title}</Title> : null}
+      {title ? <Heading type="h4" className="mb-2.5" text={title} /> : null}
       {accordionItems?.length ? (
         <ul className="list-none m-0 p-0">
           {accordionItems.map((item, i) => (

package/src/components/BaseTile/BaseTile.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTileInner } from './BaseTileInner';
 import type { AlignType, BaseTileCommonProps } from './BaseTileProps';
-import { getTitleSizeByClassName } from './getTitleSizeByClassName';
+import { getHeadingType } from './getHeadingType';
 
 const alignBlock: Record<AlignType, string> = {
   left: 'items-start',
@@ -20,7 +20,7 @@ export const BaseTile = JSX<BaseTileProps>(
     className,
     context,
     title,
-    titleSize,
+    headingType,
     description,
     children,
     buttons,
@@ -32,12 +32,11 @@ export const BaseTile = JSX<BaseTileProps>(
     return (
       <div className={`font-sans flex flex-col grow h-full ${alignBlock[align]}`}>
         {title && (
-          <Title
-            size={titleSize || getTitleSizeByClassName(className)}
+          <Heading
+            type={headingType || getHeadingType(className)}
             className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
-          >
-            {title}
-          </Title>
+            text={title}
+          />
         )}
         <BaseTileInner
           context={context}

package/src/components/BaseTile/BaseTile.tsx

@@ -1,20 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTileInner } from './BaseTileInner';
 import type { BaseTileCommonProps } from './BaseTileProps';
-import { getTitleSizeByClassName } from './getTitleSizeByClassName';
+import { getHeadingType } from './getHeadingType';
 
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
-const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
-
 export const BaseTile = JSX<BaseTileProps>(
   ({
     className,
     context,
     title,
-    titleSize,
+    headingType,
     description,
     children,
     buttons,
@@ -25,12 +23,15 @@ export const BaseTile = JSX<BaseTileProps>(
     return (
       <div className={`font-sans flex flex-col grow h-full items-start`}>
         {title && (
-          <Title
-            size={titleSize || getTitleSizeByClassName(className)}
-            className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
+          <Heading
+            type={headingType || getHeadingType(className)}
+            text={title}
+            className={`whitespace-pre-wrap max-w-[600px] ${
+              version === 'primary' ? 'text-primary-text' : ''
+            }`}
           >
             {title}
-          </Title>
+          </Heading>
         )}
         <BaseTileInner
           context={context}
@@ -39,6 +40,7 @@ export const BaseTile = JSX<BaseTileProps>(
           children={children}
           description={description}
           items={items}
+          version={version}
         />
       </div>
     );

package/src/components/BaseTile/BaseTileInner.tsx

@@ -13,22 +13,22 @@ export const BaseTileInner = JSX<BaseTileInnerProps>(
     const router = context.useRouter();
     const { handlerDecorator } = context;
     return (
-      <div className={`flex grow w-full justify-between}`}>
-        <div className={`flex flex-col justify-between items-start}`}>
+      <div className={`flex grow w-full justify-between`}>
+        <div className={`flex flex-col justify-between`}>
           <div>
             {description && (
               <div className={`font-normal text-base mt-4 max-w-[600px]`}>{description}</div>
             )}
             {children}
-            {items?.length && renderItems(items, version)}
+            {items?.length ? renderItems(items, version) : null}
           </div>
-          {buttons?.length && (
+          {buttons?.length ? (
             <div className="flex mt-9 gap-3">
               {buttons.map((button, index) =>
                 renderButton(useLink({ router, handlerDecorator }, button), index),
               )}
             </div>
-          )}
+          ) : null}
         </div>
         {image?.src && <Img className="mt-auto ml-7" image={image} />}
       </div>

package/src/components/BaseTile/BaseTileProps.ts

@@ -1,8 +1,8 @@
 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/HeadingProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
 
 /**
  * @title Выравнивание
@@ -21,7 +21,7 @@ export interface BaseTileIconButton extends ButtonWithIconProps {
 /**
  * @title Общий компонент плиток
  */
-export interface BaseTileCommonProps extends BaseTileTitleProps, BaseTileMainProps {}
+export type BaseTileCommonProps = BaseTileTitleProps & BaseTileMainProps;
 
 /**
  * @title Заголовк плитки
@@ -30,11 +30,11 @@ export interface BaseTileTitleProps {
   /** @title Заголовок */
   title?: string;
   /**
-   * @title Размер заголовка
-   * @default M
+   * @title Тип заголовка
    */
-  titleSize?: TitleSize;
+  headingType?: HeadingType;
 }
+
 export interface BaseTileMainProps {
   description?: string;
   image?: Picture;

package/src/components/BaseTile/{getTitleSizeByClassName.ts → getHeadingType.ts}

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

package/src/components/BaseTile/renderButton.tsx

@@ -6,7 +6,11 @@ export function renderButton({ icon, ...button }: BaseTileIconButton, i: number)
   if (!button?.text) return;
 
   return icon ? (
-    <Button key={String(i)} appendLeft={<Icon name={icon} width="24" height="24" />} {...button} />
+    <Button
+      key={String(i)}
+      appendLeft={<Icon name={icon} width="24" height="24" asSVG />}
+      {...button}
+    />
   ) : (
     <Button key={String(i)} {...button} />
   );

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Title } from '../../ui-kit/Title/Title';
 import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
@@ -13,7 +13,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         className || ''
       }`}
     >
-      {title ? <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title> : null}
+      {title ? <Heading type="h2" className="max-w-[47rem] text-center" text={title} /> : null}
       {benefits?.length ? (
         <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
       ) : null}

package/src/components/Blocks.mobile.ts

@@ -2,6 +2,7 @@ import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { LinkDocs } from './LinkDocs/LinkDocs';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -13,6 +14,7 @@ export const Blocks = {
   Footer,
   Header,
   Headline,
+  LinkDocs,
   Placeholder,
   ProductBlock,
   ProductGallery,

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -3,7 +3,7 @@ import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ComparisonTableContent } from './ComparisonTableContent';
 import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
 import { HeaderCell } from './HeaderCell';
@@ -54,7 +54,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           className || ''
         }`}
       >
-        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        <Heading type="h2" className="max-w-[47rem] text-center mb-9 mx-auto" text={title} />
         <div role="table">
           {colHeaders?.length ? (
             <TableRowContainer>

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -2,10 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
@@ -30,11 +30,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && (
-      <Title size="S" className="font-medium m-0 text-center text-white">
-        {title}
-      </Title>
-    )}
+    {title && <Heading type="h4" className="text-center text-white" text={title} />}
     {link?.text && (
       <div className="mt-auto w-full">
         <Button

package/src/components/ContentPage/ContentPage.page.json

@@ -1395,6 +1395,7 @@
       "style": ["col-span-12"],
       "content": {
         "title": "Дополнительные документы",
+        "subtitle": "Ответы на часто задаваемые вопросы",
         "icon": "DocIcon",
         "documents": [
           {
@@ -1881,36 +1882,36 @@
         "topItems": [
           {
             "href": "https://rshb.ru/",
-            "text": "Частным клиентам",
+            "text": "О банке",
             "target": "_blank",
             "items": [
               {
                 "href": "https://rshb.ru/",
-                "text": "Кредитные карты"
+                "text": "О банке"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Дебетовые карты"
+                "text": "Новости"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Кредиты"
+                "text": "Офисы и отделения"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Ипотека"
+                "text": "Карьера в банке"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Вклады и сбережения"
+                "text": "Пресс-центр"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Инвестиции"
+                "text": "Кредитным организациям"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Страхование"
+                "text": "Закупки"
               },
               {
                 "href": "https://rshb.ru/",
@@ -1918,90 +1919,23 @@
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Биометрическая регистрация"
+                "text": "Непрофильные/Профильные нецелевые активы"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Перевод денег"
+                "text": "Инсайдерам"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Обмен денег"
+                "text": "Противодействие коррупции"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Акции"
+                "text": "Меры безопасности"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Тарифы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Архивная информация"
-              }
-            ]
-          },
-          {
-            "href": "https://rshb.ru/",
-            "text": "Бизнес клиентам",
-            "target": "_blank",
-            "items": [
-              {
-                "href": "https://rshb.ru/",
-                "text": "РКО"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Кредиты"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Депозиты"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Эквайринг"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Банковские карты"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "ВЭД"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Инвестиции"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Обмен валюты"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Страхование"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Партнёрские программы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Онлайн-сервисы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Акции"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Тарифы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Архивная информация"
+                "text": "Залоговое имущество"
               }
             ]
           }