@redneckz/wildless-cms-uni-blocks 0.4.3 → 0.4.5

package/mobile/src/ui-kit/InnerTable/InnerTableProps.ts

@@ -0,0 +1,31 @@
+import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
+
+export type RowsData = {
+  data?: string;
+  cols?: string[];
+};
+
+export type DataItem = {
+  title?: string;
+  rowsData?: RowsData[][];
+};
+
+export type TableData = {
+  currency?: string;
+  items?: DataItem[];
+};
+
+export type TableFetchData = {
+  tableData?: TableData[];
+};
+
+export interface TariffsTableInnerContent {
+  /** @title Справочник */
+  dataUrl?: string;
+  /** @title Ссылка PDF-файл */
+  pdfUrl?: string;
+}
+
+export interface TariffsTableInnerEvent
+  extends Partial<TariffsTableCellIndexProps>,
+    TariffsTableInnerContent {}

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import type { ListItemVersion, ListProps } from './ListProps';
+import type { ListItemSize, ListItemVersion, ListProps } from './ListProps';
 
 const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'text-primary-text',
@@ -10,11 +10,26 @@ const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   'tile-white': 'text-white',
 };
 
+const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
+  M: 'text-xl-light',
+  L: 'text-h5-light',
+};
+
 export const List = JSX<ListProps>((props) => {
-  const { className = '', itemClassName, isDotted, items, version = 'primary' } = props;
+  const {
+    className = '',
+    itemClassName,
+    isDotted,
+    items,
+    listItemSize = 'M',
+    version = 'primary',
+  } = props;
 
   return (
-    <section className={`${TEXT_STYLE_MAP[version]} ${className}`} role="list">
+    <section
+      className={`${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className}`}
+      role="list"
+    >
       {items?.length
         ? items.map((_, i) => (
             <ListItem

package/mobile/src/ui-kit/List/ListProps.ts

@@ -1,5 +1,11 @@
 import type { ListContent } from './ListContent';
 
+/**
+ * @title Размер пунктов списка
+ * @enumNames ["Средний", "Большой"]
+ */
+export type ListItemSize = 'M' | 'L';
+
 /**
  * @title Версия списка
  * @enumNames ["Основной", "Второстепенный", "Серый"]
@@ -10,9 +16,12 @@ export type ListItemVersion = 'primary' | 'secondary' | 'gray' | 'tile' | 'tile-
  * @title Содержимое списка
  */
 export interface ListProps extends ListContent {
+  /** @hidden */
   className?: string;
+  /** @hidden */
+  itemClassName?: string;
   /** @title Буллиты */
   isDotted?: boolean;
+  listItemSize?: ListItemSize;
   version?: ListItemVersion;
-  itemClassName?: string;
 }

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import { Img } from '../Img/Img';
 
 export interface LogoProps {

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -47,7 +47,7 @@ const getDotStyles = (
   indexFraction: number,
 ): Record<string, string> | undefined => {
   if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
-    return;
+    return undefined;
   }
 
   const leftIndexMod = 1 - indexFraction;

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 
 export interface TopItemContent extends LinkProps {
@@ -54,8 +54,8 @@ const getLinkClasses = (bgColor: BgColorVersion, active = false, flat = false) =
 };
 
 const getTextClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
-  if (bgColor !== 'bg-white') {
-    return `text-white ${TEXT_CLASSES}`;
+  if (bgColor === 'transparent') {
+    return `text-white hover:text-primary-hover ${TEXT_CLASSES}`;
   }
   const nonActiveAtoms = `${
     flat ? 'text-primary-text' : 'text-secondary-text'

package/mobile/src/utils/assertUnreachable.ts

@@ -0,0 +1,3 @@
+export function assertUnreachable(x: never): never {
+  throw new Error(x);
+}

package/mobile/src/utils/fetchJSON.ts

@@ -0,0 +1,24 @@
+export async function fetchJSON<R = unknown>(
+  url: string,
+  options?: RequestInit,
+): Promise<R | null> {
+  try {
+    return await fetchJSONUnsafe(url, options);
+  } catch (err) {
+    console.error(err);
+  }
+
+  return null;
+}
+
+export async function fetchJSONUnsafe<R = unknown>(url: string, options?: RequestInit): Promise<R> {
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      ...options?.headers,
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return await response.json();
+}

package/mobile/src/utils/isPictureSizeEmpty.ts

@@ -0,0 +1,5 @@
+import type { Picture } from '../model/Picture';
+
+export function isPictureSizeEmpty(size: Picture['size']): boolean {
+  return !(size?.width || size?.height);
+}

package/mobile/src/utils/roundTo.ts

@@ -1,5 +1,5 @@
-export const roundTo = (value: number, precision = 2) => {
-  const factor = Math.pow(10, precision);
+export const roundTo = (value: number | string, precision = 2) => {
+  const factor = 10 ** precision;
 
   return Math.round(parseFloat(String(value)) * factor) / factor;
 };

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
   "description": "Инструмент для просмотра UI Kit",
   "type": "module",
+  "bin": {
+    "wcms-migrate": "./bin/migrate.js"
+  },
   "main": "./dist/index.js",
   "types": "./lib/index.d.ts",
   "engines": {
@@ -124,6 +127,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/glob": "^8.0.0",
     "@types/jest": "^28.1.5",
+    "@types/sharp": "^0.31.0",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/experimental-utils": "^5.30.6",
     "@typescript-eslint/parser": "^5.30.6",
@@ -164,7 +168,7 @@
   },
   "size-limit": [
     {
-      "limit": "7 kB",
+      "limit": "8 kB",
       "path": "lib/common.css"
     },
     {

package/src/EventBus/EventMap.ts

@@ -1,5 +1,6 @@
 import type { TabActivationEvent } from '../components/Tabs/Tabs';
-
+import type { TariffsTableInnerEvent } from '../ui-kit/InnerTable/InnerTableProps';
 export interface EventMap {
   tab: TabActivationEvent;
+  tariffInnerTable: TariffsTableInnerEvent;
 }

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

@@ -25,11 +25,13 @@ export const AccordionItem = JSX<AccordionItemProps>(
             }`}
           >
             {labelIcon ? (
-              <Img image={labelIcon} width="24" height="24" asSVG className="mr-3" />
+              <Img image={labelIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
             ) : null}
             {label}
           </span>
-          {hasContent ? <Img className="w-6" image={icon} width="24" height="24" asSVG /> : null}
+          {hasContent ? (
+            <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+          ) : null}
         </button>
         {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
       </li>

package/src/components/Accordion/AccordionItem.tsx

@@ -23,7 +23,13 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, block
       >
         <span className={`text-xl font-medium pr-2.5`}>{label}</span>
         {hasContent ? (
-          <Img image={icon} className="text-primary-main" width="24" height="24" asSVG />
+          <Img
+            image={icon}
+            className="text-primary-main flex-shrink-0"
+            width="24"
+            height="24"
+            asSVG
+          />
         ) : null}
       </button>
       {hasContent ? (

package/src/components/BaseTile/BaseTile.tsx

@@ -10,9 +10,9 @@ export const BaseTile = JSX<BaseTileProps>(
       <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}
         <div className="flex grow w-full justify-between">
-          <div className="flex flex-col w-full">
+          <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            {buttons ? <div className="mt-9">{buttons}</div> : null}
+            {buttons ? <div className="mt-auto">{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -1,5 +1,6 @@
 {
   "title": "Преимущества",
+  "benefitsBlockVersion": "primary",
   "benefitList": [
     {
       "label": "Преимущество №1",

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -61,6 +61,7 @@ export default {
             icon: image,
           },
         ]}
+        benefitsBlockVersion="primary"
       />
     </div>
   ),
@@ -104,10 +105,10 @@ export default {
             icon: { icon: 'GlobalIcon' },
           },
         ]}
+        benefitsBlockVersion="primary"
       />
     </div>
   ),
-
   list: (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
@@ -155,4 +156,96 @@ export default {
       />
     </div>
   ),
+  'list-green': (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefitList={[
+          {
+            label: 'Без комиссии',
+            icon: { icon: 'ClockIcon' },
+            description: {
+              bullets: true,
+              items: itemsList,
+              benefitType: 'list',
+            },
+          },
+          {
+            label: 'Оформление по паспорту',
+            description: {
+              bullets: true,
+              items: itemsList,
+              benefitType: 'list',
+            },
+            icon: { icon: 'SignDocsIcon' },
+          },
+          {
+            label: 'Без залога и поручительства',
+            description: {
+              bullets: true,
+              items: itemsList,
+              benefitType: 'list',
+            },
+            icon: { icon: 'ComfortableCompIcon' },
+          },
+          {
+            label: 'Деньги за 3 дня',
+            description: {
+              bullets: true,
+              items: itemsList,
+              benefitType: 'list',
+            },
+            icon: { icon: 'ActualBalanceIcon' },
+          },
+        ]}
+        benefitsBlockVersion="secondary"
+      />
+    </div>
+  ),
+  'desc-icon-green': (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefitList={[
+          {
+            label: 'Без комиссии',
+            description: {
+              name: 'Комиссия за выдачу ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'MoneyIcon' },
+          },
+          {
+            label: 'Оформление',
+            description: {
+              name: 'Обеспечение ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'PersonalCardIcon' },
+          },
+          {
+            label: 'Без залога ',
+            description: {
+              name: 'Единовременное перечисление ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'CalendarTickIcon' },
+          },
+          {
+            label: 'Деньги за 3 дня',
+            description: {
+              name: 'Рассмотрение  ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'GlobalIcon' },
+          },
+        ]}
+        benefitsBlockVersion="secondary"
+      />
+    </div>
+  ),
 };

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -3,64 +3,114 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { BenefitItemProps, BenefitsBlockContent } from './BenefitsBlockContent';
-import { DescriptionDef, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import {
+  BenefitBlockItemProps,
+  BenefitsBlockVersion,
+  DescriptionDef,
+} from './BenefitsBlockContent';
+import { Picture } from '../../model/Picture';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
+const benefitsBlockStyleMap = {
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};
+
+const benefitsTextStyleMap = {
+  primary: '',
+  secondary: 'text-white',
+};
+
+const benefitsDescriptionStyleMap = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white opacity-80',
+};
+
+const benefitsIconStyleMap = {
+  primary: 'bg-main-divider text-primary-main',
+  secondary: 'bg-white/30 text-black',
+};
+
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, benefitList, ...rest }) => {
+  ({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
     return (
       <BlockWrapper
-        className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`}
+        className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`}
         {...rest}
       >
         {title ? (
-          <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
+          <Heading
+            headingType="h3"
+            as="h2"
+            className={`max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`}
+            title={title}
+          />
         ) : null}
-        {benefitList?.length ? renderBenefits(benefitList) : null}
+        {benefitList?.length ? renderBenefits(benefitList, benefitsBlockVersion) : null}
       </BlockWrapper>
     );
   },
 );
 
-const renderBenefits = (benefits: BenefitItemProps[]) => {
+const renderBenefits = (
+  benefitList: BenefitBlockItemProps[],
+  benefitsBlockVersion: BenefitsBlockVersion,
+) => {
   return (
     <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-      {benefits.map(renderStep)}
+      {benefitList.map(renderStep(benefitsBlockVersion))}
     </div>
   );
 };
 
-const renderStep = (benefit: BenefitItemProps, i: number) => {
-  const description = benefit?.description || undefined;
+const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BenefitsBlockVersion) => {
+  if (!benefitIcon.icon) {
+    return benefitIcon;
+  }
+  benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
 
-  return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-      {benefit?.icon?.icon ? (
-        <Img
-          className="w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-main-divider"
-          image={benefit.icon}
-          asSVG
-        />
-      ) : null}
-      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5">
-        {benefit?.label ? <h3 className="text-h6 m-0">{benefit.label}</h3> : null}
-        {renderDescription(description)}
-      </div>
-    </div>
-  );
+  return benefitIcon;
 };
 
-const renderDescription = (description?: DescriptionDef) => {
+const renderStep =
+  (benefitsBlockVersion: BenefitsBlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+    const description = (benefit?.description || undefined) as DescriptionDef;
+
+    return (
+      <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
+        {benefit?.icon?.icon ? (
+          <Img
+            className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`}
+            image={setIconVersion(benefit.icon, benefitsBlockVersion)}
+            asSVG
+          />
+        ) : null}
+        {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
+        <div className="ml-5">
+          {benefit?.label ? (
+            <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`}>
+              {benefit.label}
+            </h3>
+          ) : null}
+          {renderDescription(description, benefitsBlockVersion)}
+        </div>
+      </div>
+    );
+  };
+
+const renderDescription = (
+  description: DescriptionDef,
+  benefitsBlockVersion: BenefitsBlockVersion,
+) => {
   const benefitType = description ? description?.benefitType : null;
   if (!benefitType) {
     return null;
   }
 
   return description ? (
-    <div className="text-l-light text-secondary-text mt-2">
+    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`}>
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { TitleProp } from '../../model/HeadlineType';
+import type { TitleProps } from '../../model/HeadlineType';
 import type { EmptyOption } from '../../model/EmptyOptionType';
 
 /**
@@ -37,7 +37,7 @@ export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 /**
  * @title Преимущество
  */
-export interface BenefitItemProps {
+export interface BenefitBlockItemProps {
   /** @title Название */
   label?: string;
   /** @title Описание */
@@ -45,13 +45,21 @@ export interface BenefitItemProps {
   icon?: Picture;
 }
 
+/**
+ * @title Цвет блока
+ * @enumNames ["Основная", "Второстепенная"]
+ */
+export type BenefitsBlockVersion = 'primary' | 'secondary';
+
 /**
  * @title Блок преимущества
  */
-export type BenefitsBlockContent = TitleProp & {
+export type BenefitsBlockContent = TitleProps & {
   /**
    * @title Список преимуществ
    * @maxItems 6
    */
-  benefitList?: BenefitItemProps[];
+  benefitList?: BenefitBlockItemProps[];
+  /** @default primary */
+  benefitsBlockVersion?: BenefitsBlockVersion;
 };

package/src/components/BlockContent.ts

@@ -6,14 +6,12 @@ import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTil
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
 import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
-import type { GroupBlockContent } from './GroupBlock/GroupBlockContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlock/InsuranceAmountBlockContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
 import type { NavigationContent } from './Navigation/NavigationContent';
-import type { NavigatorTabsContent } from './NavigatorTabs/NavigatorTabsContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -22,6 +20,7 @@ import type { ProductTileContent } from './ProductTile/ProductTileContent';
 import type { PromoTileContent } from './PromoTile/PromoTileContent';
 import type { SafeDepositRentalContent } from './SafeDepositRental/SafeDepositRentalContent';
 import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
+import { TabsContent } from './Tabs/TabsContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
@@ -41,7 +40,6 @@ export type BlockContent =
   | InsuranceAmountBlockContent
   | LinkDocsContent
   | MobileAppTileContent
-  | NavigatorTabsContent
   | PictureTextContent
   | PlaceholderContent
   | ProductBlockContent
@@ -54,6 +52,6 @@ export type BlockContent =
   | TileContent
   | NavigationContent
   | LinkListContent
-  | GroupBlockContent
   | BonusBenefitsBlockContent
-  | SafeDepositRentalContent;
+  | SafeDepositRentalContent
+  | TabsContent;

package/src/components/Blocks.ts

@@ -9,7 +9,6 @@ import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { GracePeriod } from './GracePeriod/GracePeriod';
-import { GroupBlock } from './GroupBlock/GroupBlock';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
@@ -17,7 +16,6 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
-import { NavigatorTabs } from './NavigatorTabs/NavigatorTabs';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
@@ -50,7 +48,6 @@ export const Blocks = {
   LinkDocs,
   MiniGallery,
   MobileAppTile,
-  NavigatorTabs,
   PictureText,
   ProductBlock,
   ProductGallery,
@@ -64,7 +61,6 @@ export const Blocks = {
   Tile,
   Navigation,
   Placeholder,
-  GroupBlock,
   BonusBenefitsBlock,
   SafeDepositRental,
   Tabs,

package/src/components/Calculator/Calculator.tsx

@@ -109,7 +109,7 @@ function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex
     <div>
       <div
         style={{ transform: `translateX(-${tabsShift * 388}px)` }}
-        className="flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000"
+        className="flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000"
       >
         <div className="w-full flex flex-nowrap items-end gap-2">
           {tabsNav.map((tab, i) =>