@redneckz/wildless-cms-uni-blocks 0.2.92 → 0.2.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.92",
+  "version": "0.2.93",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -65,16 +65,18 @@
     "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
     "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir dist",
     "bundle": "rimraf ./bundle && rollup -c && npm run build:schema",
-    "build:schema": "ts-json-schema-generator --path './src/**/*Content.ts' --additional-properties --validation-keywords enumNames --validation-keywords required --minify --no-type-check -o ./bundle/blocks.schema.json",
+    "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",
     "build:style": "postcss ./src/**/*.css --env production --dir ./lib",
     "build:icons": "svgo -f ./src/icons -o ./cosmos-static/icons",
     "size": "size-limit",
+    "lint": "eslint ./src",
+    "pretest": "npm run lint",
     "test": "jest --coverage",
     "precosmos": "npm run build:icons",
     "cosmos": "cosmos",
     "precosmos:export": "npm run build:icons",
     "cosmos:export": "cosmos-export",
-    "prepare": "husky install || exit 0"
+    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -92,14 +94,18 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@size-limit/file": "^7.0.8",
-    "@types/jest": "^28.1.1",
+    "@types/jest": "^28.1.5",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/experimental-utils": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
     "autoprefixer": "^10.4.7",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.11",
+    "eslint": "^8.19.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.1",
+    "jest": "^28.1.3",
     "lint-staged": "^13.0.1",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
@@ -114,12 +120,13 @@
     "style-loader": "^3.3.1",
     "svgo": "^2.8.0",
     "tailwindcss": "^3.1.1",
-    "ts-jest": "^28.0.4",
+    "ts-jest": "^28.0.6",
     "ts-json-schema-generator": "^1.0.0",
     "ts-loader": "^9.3.0",
-    "typescript": "^4.7.3",
+    "typescript": "^4.7.4",
     "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^4.9.2",
+    "eslint-plugin-local-eslint-rules": "./eslint-rules"
   },
   "size-limit": [
     {
@@ -132,7 +139,10 @@
     }
   ],
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,css}": "prettier --write",
+    "src/**/*.{js,jsx,ts,tsx,css}": [
+      "prettier --write",
+      "eslint"
+    ],
     "*.{js,jsx,ts,tsx,css,json}": [
       "npm run cosmos:export",
       "git add ./docs"

package/src/api/LikeAPI.ts

@@ -10,6 +10,7 @@ export interface LikeData {
 const AUTH_PREFIX = 'guest';
 const STORAGE_KEY = 'likesToken';
 
+// eslint-disable-next-line max-lines-per-function
 export function LikeAPI(projectId: string, baseURL = '') {
   async function getLikeCount(...nodeIds: string[]): Promise<LikeData[]> {
     if (!nodeIds.length) {

package/src/components/Accordion/Accordion.example.json

@@ -5,22 +5,14 @@
       "label": "Accordion label 1",
       "blocks": [
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
         },
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
         }
       ]
     },
@@ -28,22 +20,14 @@
       "label": "Accordion label 2",
       "blocks": [
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
         },
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
         }
       ]
     },
@@ -51,22 +35,14 @@
       "label": "Accordion label 3",
       "blocks": [
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
         },
         {
-          "type": "TextBlock",
-          "data": {
-            "title": "Title",
-            "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
-            "blockVersion": "secondary-light",
-            "iconVersion": "small"
-          }
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
         }
       ]
     }

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

@@ -1,52 +1,35 @@
 import { context } from '../../setup-fixture';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { LINK_DOCS } from '../LinkDocs/LinkDocs.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
-import type { HeadlineProps } from '../Headline/Headline';
-import type { PictureTextContent } from '../PictureText/PictureTextContent';
-import type { TextBlockContent } from '../TextBlock/TextBlockContent';
-
 import { Accordion } from './Accordion';
-import {
-  LinkDocsFixtureSetOne,
-  LinkDocsFixtureSetThree,
-  LinkDocsFixtureSetTwo,
-} from '../LinkDocs/LinkDocs.fixture';
+import type {
+  HeadlineAccordionBlock,
+  LinkDocsAccordionBlock,
+  PictureTextAccordionBlock,
+  TextBlockAccordionBlock,
+} from './AccordionContent';
 
-const TEXT_BLOCK: TextBlockContent = {
-  description:
-    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?',
+const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlock = {
+  accordionBlockType: 'TextBlock',
+  ...TEXT_BLOCK,
 };
 
-const HEADLINE: HeadlineProps = {
-  context,
-  title: 'Своя кредитная карта',
-  description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
-  align: 'left',
-  bgColor: 'bg-white',
+const HEADLINE_ACCORDION_BLOCK: HeadlineAccordionBlock = {
+  accordionBlockType: 'Headline',
+  ...HEADLINE,
 };
 
-const PICTURE_TEXT: PictureTextContent = {
-  title: 'Варианты потребительского кредита',
-  benefits: [
-    {
-      label: 'Кредит по одному документу',
-      description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-      icon: 'DocumentText',
-    },
-    {
-      label: 'Кредит на общих условиях',
-      description: 'До 5 млн ₽ на общих условиях получения кредита',
-      icon: 'DiscountShape',
-    },
-  ],
-  image: {
-    src: 'legal-support-business.png',
-    alt: 'Варианты потребительского кредита',
-    format: 'webp',
-    size: {
-      width: 200,
-      height: 200,
-    },
-  },
+const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
+  accordionBlockType: 'PictureText',
+  ...PICTURE_TEXT,
+};
+
+const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
+  accordionBlockType: 'LinkDocs',
+  ...LINK_DOCS,
 };
 
 const propsTextBlock: AccordionProps = {
@@ -55,94 +38,21 @@ const propsTextBlock: AccordionProps = {
   accordionItems: [
     {
       label: 'Accordion label 1',
-      blocks: [
-        {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
-        },
-        {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
-        },
-      ],
+      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
     },
     {
       label: 'Accordion label 2',
-      blocks: [
-        {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
-        },
-        {
-          type: 'TextBlock',
-          data: TEXT_BLOCK,
-        },
-      ],
+      blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
     },
     {
       label: 'Accordion label 3',
-      blocks: [
-        {
-          type: 'PictureText',
-          data: PICTURE_TEXT,
-        },
-        {
-          type: 'PictureText',
-          data: PICTURE_TEXT,
-        },
-      ],
+      blocks: [HEADLINE_ACCORDION_BLOCK],
     },
     {
       label: 'Accordion label 4',
-      blocks: [
-        {
-          type: 'Headline',
-          data: HEADLINE,
-        },
-        {
-          type: 'Headline',
-          data: HEADLINE,
-        },
-      ],
+      blocks: [LINK_DOCS_ACCORDION_BLOCK],
     },
   ],
 };
 
-const propsLinkDocs: AccordionProps = {
-  title: 'Accordion title',
-  context,
-  accordionItems: [
-    {
-      label: 'Список документов в 2 колонки',
-      blocks: [
-        {
-          type: 'LinkDocs',
-          data: { ...LinkDocsFixtureSetOne, title: '' },
-        },
-      ],
-    },
-    {
-      label: 'Список документов в одну колонку',
-      blocks: [
-        {
-          type: 'LinkDocs',
-          data: { ...LinkDocsFixtureSetTwo, title: '' },
-        },
-      ],
-    },
-    {
-      label: 'Немного кастомизированный список',
-      blocks: [
-        {
-          type: 'LinkDocs',
-          data: LinkDocsFixtureSetThree,
-        },
-      ],
-    },
-  ],
-};
-
-export default {
-  'with text block': <Accordion {...propsTextBlock} />,
-  'with link docs block': <Accordion {...propsLinkDocs} />,
-};
+export default <Accordion {...propsTextBlock} />;

package/src/components/Accordion/AccordionContent.ts

@@ -2,41 +2,70 @@ import type { HeadlineContent } from '../Headline/HeadlineContent';
 import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import type { PictureTextContent } from '../PictureText/PictureTextContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
-import AccordionBlocks from './AccordionBlocks';
 
 /**
- * @hidden
- * @title Содержимое блока
+ * @title Тип блока
  */
-export type AccordionData =
-  | HeadlineContent
-  | LinkDocsContent
-  | TextBlockContent
-  | PictureTextContent;
+export type AccordionTypeBlock = 'Headline' | 'LinkDocs' | 'TextBlock' | 'PictureText';
 
 /**
- * @hidden
- * @title Тип блока
- * @enumNames ["Заголовок", "Блок документов", Текстовый блок", "Картинка с текстом"]
+ * @title Заголовок
  */
-export type AccordionTypeBlock = keyof typeof AccordionBlocks;
+export interface HeadlineAccordionBlock extends HeadlineContent {
+  /** @default Headline */
+  accordionBlockType: AccordionTypeBlock;
+}
 
 /**
- * Блок
+ * @title Список документов
  */
-export interface AccordionBlock {
-  type?: AccordionTypeBlock;
-  data?: AccordionData;
+export interface LinkDocsAccordionBlock extends LinkDocsContent {
+  /** @default LinkDocs */
+  accordionBlockType: AccordionTypeBlock;
 }
 
+/**
+ * @title Текстовый блок
+ */
+export interface TextBlockAccordionBlock extends TextBlockContent {
+  /** @default TextBlock */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Картинка с текстом
+ */
+export interface PictureTextAccordionBlock extends PictureTextContent {
+  /** @default PictureText */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Выберите блок
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Содержимое аккордеона
+ */
+export type AccordionBlockProps =
+  | EmptyOption
+  | HeadlineAccordionBlock
+  | LinkDocsAccordionBlock
+  | TextBlockAccordionBlock
+  | PictureTextAccordionBlock;
+
 /**
  * @title Элемент списка
  */
 export interface AccordionItemCommonProps {
-  /** @title Название */
+  /**
+   * @title Название
+   * @default Список
+   */
   label?: string;
   /** @title Блоки */
-  blocks?: AccordionBlock[];
+  blocks?: AccordionBlockProps[];
 }
 
 /**

package/src/components/Accordion/AccordionItem.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import type { JSXBlock } from '../ContentPage/ContentPage';
 import { ContentPageContext } from '../ContentPage/ContentPageContext';
 import AccordionBlocks from './AccordionBlocks';
-import type { AccordionBlock, AccordionItemCommonProps } from './AccordionContent';
+import type { AccordionBlockProps, AccordionItemCommonProps } from './AccordionContent';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
@@ -13,8 +13,11 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
   const hasContent = blocks?.length;
   const icon = isActive ? 'MinusIcon' : 'PlusIcon';
 
-  const handleToggle = (e) => {
-    if (!hasContent) return null;
+  const handleToggle = (e: MouseEvent) => {
+    if (!hasContent) {
+      return;
+    }
+
     setIsActive(!isActive);
     const contentBlock = getContentBlock(e);
     contentBlock.style.maxHeight = contentBlock.style.maxHeight
@@ -51,18 +54,19 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
   );
 });
 
-const renderBlock = (block: AccordionBlock, i: number, context: ContentPageContext) => {
-  if (!block.type || !block.data || !AccordionBlocks.hasOwnProperty(block.type)) {
+const renderBlock = (block: AccordionBlockProps, i: number, context: ContentPageContext) => {
+  const type = block?.accordionBlockType;
+  if (!type || !(type in AccordionBlocks)) {
     return null;
   }
 
-  const AccordionBlock: JSXBlock = AccordionBlocks[block.type];
+  const AccordionBlock: JSXBlock = AccordionBlocks[type];
   return (
     <div className="mb-5 last:mb-0" key={`block_${i}`}>
-      <AccordionBlock context={context} {...block.data} />
+      <AccordionBlock context={context} {...block} />
     </div>
   );
 };
 
-const getContentBlock = (e) =>
-  e.target.tagName === 'BUTTON' ? e.target.nextSibling : e.target.parentNode.nextSibling;
+const getContentBlock = ({ target }) =>
+  target.tagName === 'BUTTON' ? target.nextSibling : target.parentNode.nextSibling;

package/src/components/BaseTile/BaseTile.tsx

@@ -44,11 +44,14 @@ export const BaseTile = JSX<BaseTileProps>(
     return (
       <div className={`font-sans flex flex-col grow h-full ${alignBlock[align]}`}>
         {title && (
-          <Title size={titleSize || getTitleSizeByClassName(className)} className={TITLE_CLASSES}>
+          <Title
+            size={titleSize || getTitleSizeByClassName(className)}
+            className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
+          >
             {title}
           </Title>
         )}
-        <div className="flex grow justify-between">
+        <div className="flex grow justify-between w-full">
           <div className={`flex flex-col justify-between ${alignBlock[align]}`}>
             <div>
               {description ? (
@@ -74,7 +77,7 @@ export const BaseTile = JSX<BaseTileProps>(
   },
 );
 
-function getTitleSizeByClassName(className: string = '') {
+function getTitleSizeByClassName(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 4) {
     return 'S';

package/src/components/Blocks.ts

@@ -17,9 +17,9 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
-import { TariffsTable } from './TariffsTable/TariffsTable';
 
 export const Blocks = {
   Accordion,

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+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 { TableRowContainer } from './TableRowContainer';
-import { TableCarouselContainer } from './TableCarouselContainer';
-import { useLink } from '../../hooks/useLink';
 import type { ComparisonTableContent } from './ComparisonTableContent';
+import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
 import { HeaderCell } from './HeaderCell';
+import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableRow } from './TableRow';
-import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import { TableRowContainer } from './TableRowContainer';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -39,12 +39,12 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
     const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll(
+      useComparisonTableScroll({
         colData,
-        COLS_LENGTH_FOR_SCROLL,
+        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
         activeCardIndex,
         setActiveCardIndex,
-      );
+      });
 
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
 

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -17,7 +17,7 @@ export interface HeaderCellProps {
 
 export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
   <div
-    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-12 ${BORDER_CLASSES} ${GRADIENT}`}
+    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`}
     role="columnheader"
     scope="col"
   >
@@ -29,7 +29,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
         height="63"
       />
     )}
-    {image?.src && <Img className="mb-4" image={image} />}
+    {image?.src && <Img className="mb-[18px]" image={image} />}
     {title && (
       <Title size="S" className="font-medium m-0 text-center text-white">
         {title}
@@ -42,7 +42,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
           target={link.target}
           className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
-          <div className="text-xs py-[11px]">{link.text}</div>
+          <div className="font-medium text-xs py-[11px]">{link.text}</div>
         </Button>
       </div>
     )}

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -1,12 +1,12 @@
 import { context, mobileContext } from '../../setup-fixture';
 
+import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';
-import { BlockDecorator, ContentPage } from './ContentPage';
 import { MobileBlocks } from '../MobileBlocks';
+import { BlockDecorator, ContentPage } from './ContentPage';
 import { toMobilePage } from './toMobilePage';
-import type { ContentPageDef } from '../../types';
 
-const data = require('./ContentPage.page.json');
+import data from './ContentPage.page.json';
 
 const blockDecorator: BlockDecorator = ({ blockClassName, block, render }, i) => (
   <div