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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.92",
+  "version": "0.2.96",
   "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,20 @@
     "@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",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-local-eslint-rules": "./eslint-rules",
     "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,10 +122,10 @@
     "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"
   },
@@ -132,7 +140,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,25 @@ 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 (
+  <div className="container grid grid-cols-12">
+    <Accordion className="col-span-12" {...propsTextBlock} />
+  </div>
+);

package/src/components/Accordion/AccordionBlocks.tsx

@@ -3,11 +3,9 @@ import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { PictureText } from '../PictureText/PictureText';
 import { TextBlock } from '../TextBlock/TextBlock';
 
-const AccordionBlocks = {
+export const AccordionBlocks = {
   Headline,
   LinkDocs,
   TextBlock,
   PictureText,
 };
-
-export default AccordionBlocks;

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

@@ -3,8 +3,8 @@ import type { UniBlockProps } from '../../types';
 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 { AccordionBlocks } from './AccordionBlocks';
+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

@@ -10,6 +10,11 @@ import { Title } from '../../ui-kit/Title/Title';
 import { getColSpan } from '../../utils/getColSpan';
 import type { AlignType, BaseTileCommonProps, BaseTileIconButton } from './BaseTileProps';
 
+const alignFlex: Record<AlignType, string> = {
+  left: 'justify-between',
+  center: 'justify-center',
+  right: 'justify-end',
+};
 const alignBlock: Record<AlignType, string> = {
   left: 'items-start',
   center: 'items-center',
@@ -23,7 +28,7 @@ const alignText: Record<AlignType, string> = {
 
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
-const TITLE_CLASSES = 'font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]';
+const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
 
 export const BaseTile = JSX<BaseTileProps>(
   ({
@@ -44,15 +49,18 @@ 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 w-full ${alignFlex[align]}`}>
           <div className={`flex flex-col justify-between ${alignBlock[align]}`}>
             <div>
               {description ? (
-                <div className={`font-normal text-base max-w-[600px] ${alignText[align]}`}>
+                <div className={`font-normal text-base mt-4 max-w-[600px] ${alignText[align]}`}>
                   {description}
                 </div>
               ) : null}
@@ -74,7 +82,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/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -3,32 +3,35 @@ import { context } from '../../setup-fixture';
 import { BenefitsBlock } from './BenefitsBlock';
 
 export default (
-  <BenefitsBlock
-    context={context}
-    title="Преимущества кредита"
-    benefits={[
-      {
-        label: 'Без комиссии',
-        description:
-          'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
-        icon: 'ClockIcon',
-      },
-      {
-        label: 'Оформление по паспорту',
-        description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
-        icon: 'SignDocsIcon',
-      },
-      {
-        label: 'Без залога и поручительства',
-        description:
-          'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
-        icon: 'ComfortableCompIcon',
-      },
-      {
-        label: 'Деньги за 3 дня',
-        description: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
-        icon: 'ActualBalanceIcon',
-      },
-    ]}
-  />
+  <div className="container grid grid-cols-12">
+    <BenefitsBlock
+      context={context}
+      className="col-span-12"
+      title="Преимущества кредита"
+      benefits={[
+        {
+          label: 'Без комиссии',
+          description:
+            'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
+          icon: 'ClockIcon',
+        },
+        {
+          label: 'Оформление по паспорту',
+          description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
+          icon: 'SignDocsIcon',
+        },
+        {
+          label: 'Без залога и поручительства',
+          description:
+            'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
+          icon: 'ComfortableCompIcon',
+        },
+        {
+          label: 'Деньги за 3 дня',
+          description: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
+          icon: 'ActualBalanceIcon',
+        },
+      ]}
+    />
+  </div>
 );

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,