@redneckz/wildless-cms-uni-blocks 0.10.5 → 0.10.6

package/src/components/Blocks.mobile.ts

@@ -3,11 +3,13 @@ import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
@@ -19,14 +21,16 @@ export const Blocks: BlocksRegistry = {
   Footer,
   Header,
   Headline,
+  ImgBlock,
   LinkDocs,
   LinkList,
   MobileAppTile,
+  Placeholder,
   ProductBlock,
   StepsBlock,
   TariffsTable,
   TextBlock,
-  Placeholder,
+  RichTextBlock,
   RollupItem,
   VerticalLayout,
 };

package/src/components/Bonus/Bonus.tsx

@@ -14,7 +14,7 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default pb-9 ${className}`} {...rest}>
       <div className="container">
         <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
         <div className="flex flex-wrap w-full mt-9">

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -24,7 +24,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={`font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`}
+      className={`font-sans text-primary-text bg-white p-default flex flex-col text-center ${className}`}
       {...rest}
     >
       <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -9,7 +9,7 @@ export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps
 
 export const BusinessBlock = JSX<BusinessBlockProps>(
   ({ className = '', title, cards, ...rest }) => (
-    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default pb-9 ${className}`} {...rest}>
       <Heading headingType="h3" title={title} className="text-center mb-8" />
       <div className="flex gap-5">
         {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -114,20 +114,20 @@ const renderBusinessDepositParamsForm = ({
     <Checkbox
       text="Пополнение"
       disabled={isDisabledOperatingDeposit}
-      checked={isReplenished}
+      value={isReplenished}
       onChange={handleIsReplenished}
     />
     <Checkbox
       className="mt-3"
       disabled={isDisabledOperatingDeposit}
       text="Частичное снятие"
-      checked={isPartialWithdrawal}
+      value={isPartialWithdrawal}
       onChange={handleIsPartialWithdrawal}
     />
     <Checkbox
       className="mt-3"
       text="Являюсь малым предприятием"
-      checked={isSmallBusiness}
+      value={isSmallBusiness}
       onChange={handleIsSmallBusiness}
     />
   </div>

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -125,7 +125,7 @@ const renderCreditParamsForm = ({
     {isShowSalaryClient ? (
       <Checkbox
         text="Получаю зарплату на счёт в Россельхозбанке"
-        checked={isSalaryClient}
+        value={isSalaryClient}
         onChange={handleIsSalaryClient}
       />
     ) : null}
@@ -133,7 +133,7 @@ const renderCreditParamsForm = ({
       <Checkbox
         className="mt-3"
         text="Работаю в бюджетной организации"
-        checked={isStateEmployee}
+        value={isStateEmployee}
         onChange={handleIsStateEmployee}
       />
     ) : null}
@@ -141,7 +141,7 @@ const renderCreditParamsForm = ({
       <Checkbox
         className="mt-3"
         text="Получаю пенсию на карту Россельхозбанка"
-        checked={isPensionClient}
+        value={isPensionClient}
         onChange={handleIsPensionClient}
       />
     ) : null}
@@ -149,7 +149,7 @@ const renderCreditParamsForm = ({
       <Checkbox
         className="mt-3"
         text="Комплексная страховая защита"
-        checked={isInsurance}
+        value={isInsurance}
         onChange={handleIsInsurance}
       />
     ) : null}

package/src/components/CardTransfer/CardTransfer.tsx

@@ -37,7 +37,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
+      <BlockWrapper className={`p-default flex flex-col items-center ${className}`} {...rest}>
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
         <form className="w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput

package/src/components/Carousel/Carousel.fixture.tsx

@@ -102,7 +102,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={3}
+        visibleItemCount={1}
         isBlur={true}
         block={{
           type: 'Carousel',

package/src/components/Carousel/Carousel.tsx

@@ -104,7 +104,7 @@ Carousel.childrenTypes = [
   'CarouselEventCard',
 ];
 
-const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');
+const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default' : '');
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';

package/src/components/Carousel/CarouselScrollButtons.tsx

@@ -73,9 +73,13 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
 );
 
 const renderBlur = (isBlur: boolean, scroll: SwipeListScroll) =>
-  (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
+  isBlur ? (
     <div>
-      <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
-      <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+      {scroll.canScrollLeft ? (
+        <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
+      ) : null}
+      {scroll.canScrollRight ? (
+        <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+      ) : null}
     </div>
   ) : null;

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -26,6 +26,7 @@
       { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
       { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
     ],
-    "align": "text-center"
+    "align": "text-center",
+    "isFullWidth": true
   }
 }

package/src/components/CarouselProductCard/CarouselProductCard.fixture.tsx

@@ -51,6 +51,7 @@ export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
   icon: image,
   button: buttonPrimary,
   isDotted,
+  isFullWidth: false,
 };
 
 const CAROUSEL_PRODUCT_CARD = <CarouselProductCard {...PRODUCT_CARD} />;

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -52,8 +52,8 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           {renderAdditionalDescription(additionalDescription)}
         </LinkWrapper>
         {renderButtonsSection([button], {
-          className: style('p-6 pt-0', isFullWidth ? '' : 'justify-center'),
-          isVertical: isFullWidth ? true : false,
+          className: style('p-6 pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
+          isVertical: isFullWidth,
         })}
       </BlockWrapper>
     );

package/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -9,7 +9,7 @@ export interface CarouselRichTextCardProps extends CarouselRichTextCardContent,
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
   ({ className = '', __html, richVersion = 'striped', ...rest }) => (
-    <BlockWrapper className={style('p-9 border border-gray min-w-96', className)} {...rest}>
+    <BlockWrapper className={style('p-9 border border-gray h-full min-w-96', className)} {...rest}>
       <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   ),

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -17,7 +17,7 @@ interface RenderContactsColumnProps {
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => (
-    <BlockWrapper className={`flex p-12 ${className}`} version={version} {...rest}>
+    <BlockWrapper className={`flex p-default ${className}`} version={version} {...rest}>
       {info?.length ? renderBlocks(info) : null}
       {contacts?.length ? renderBlocks(contacts) : null}
     </BlockWrapper>

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,5 +1,5 @@
 import { Input } from '../../ui-kit/Input/Input';
-import type { OptionProps } from '../../ui-kit/Select/Select';
+import type { Option } from '../../ui-kit/Select/Select';
 import { Select } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
@@ -15,11 +15,11 @@ interface InputProps {
 
 export function renderInput(props: InputProps) {
   const { placeholder, rates, selected, value, setValue, setSelected } = props;
-  const ratesOptions: OptionProps[] = rates.map((_) => ({
+  const ratesOptions: Option[] = rates.map((_) => ({
     key: _?.currency?.currency ?? '',
     text: _?.currency?.currency ?? '',
   }));
-  const selectedValue: OptionProps = { key: selected, text: selected };
+  const selectedValue: Option = { key: selected, text: selected };
 
   return (
     <div className="relative flex">

package/src/components/Filtration/Filtration.tsx

@@ -10,23 +10,25 @@ import { renderFormItem } from './renderFormItem';
 
 interface FiltrationProps extends FiltrationContent, UniBlockProps {}
 
+const initialFiltrationState = {};
+
 export const Filtration: JSXBlock<FiltrationProps> = JSX<FiltrationProps>(
   ({ className, filtrationSchema = {}, resetButton, ...rest }) => {
-    const { formState, register, resetForm } = useForm();
+    const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
     return (
       <BlockWrapper className={style(className)} version="transparent" {...rest}>
         <form className="flex justify-between bg-white p-9 mb-1">
           <div className="flex gap-11">
-            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, register))}
+            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, field))}
           </div>
           {resetButton ? (
             <div>
-              <Button className="w-72" onClick={resetForm} {...resetButton} />
+              <Button className="w-72" onClick={reset} {...resetButton} />
             </div>
           ) : null}
         </form>
-        <FiltrationInner filtrationState={formState} {...rest} />
+        <FiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>
     );
   },

package/src/components/Filtration/renderFormItem.tsx

@@ -1,22 +1,22 @@
-import type { FormElementRegisterer } from '../../hooks/useForm';
+import type { FormFieldRegisterer } from '../../hooks/useForm';
 import { SlideCheckboxGroup } from '../../ui-kit/SlideCheckboxGroup/SlideCheckboxGroup';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FiltrationSchema, StringArray } from './FiltrationContent';
 
 export const renderFormItem =
-  (filtrationSchema: FiltrationSchema, register: FormElementRegisterer) => (key: string) => {
+  (filtrationSchema: FiltrationSchema, field: FormFieldRegisterer<any>) => (key: string) => {
     const item = filtrationSchema[key as keyof typeof filtrationSchema];
     const type = item?.type;
 
     switch (type) {
       case 'array':
-        return renderCheckboxes(key, register)(item);
+        return renderCheckboxes(key, field)(item);
       default:
         return null;
     }
   };
 
-const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item?: StringArray) => {
+const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item?: StringArray) => {
   const options =
     item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
     [];
@@ -30,7 +30,7 @@ const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item
           </Text>
         </div>
       ) : null}
-      <SlideCheckboxGroup items={options} multiple {...register(key)} />
+      <SlideCheckboxGroup items={options} multiple {...field(key)} />
     </div>
   );
 };

package/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`p-12 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default ${className}`} {...rest}>
       <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>

package/src/components/Headline/Headline.tsx

@@ -24,7 +24,7 @@ export const Headline = JSX<HeadlineProps>(
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
-    const paddingStyle = isPadding ? 'p-12' : '';
+    const paddingStyle = isPadding ? 'p-default' : '';
 
     return (
       <BlockWrapper

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -21,7 +21,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
       className={style(
         'relative',
         'grid grid-cols-12',
-        isPadding ? 'p-12' : '',
+        isPadding ? 'p-default' : '',
         gapStyles[gap],
         className,
       )}

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

@@ -0,0 +1,21 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { ImgBlock } from './ImgBlock';
+
+const image: Picture = {
+  src: 'legal-support-business.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 200,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ImgBlock className="col-span-12" image={image} />
+    </div>
+  ),
+};

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -19,7 +19,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('py-6 px-4', className)} {...rest}>
+    <BlockWrapper className={style('p-default', className)} {...rest}>
       <Headline
         isPadding={false}
         title={title}

package/src/components/LinkDocs/LinkDocs.tsx

@@ -25,7 +25,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
     ...rest
   }) => (
-    <BlockWrapper className={style('p-12', className)} {...rest}>
+    <BlockWrapper className={style('p-default', className)} {...rest}>
       <Headline
         className="!p-0"
         title={title}

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -30,7 +30,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
 
     return (
       <BlockWrapper
-        className={`flex justify-between p-12 box-border relative min-h-80 ${getTileMinHeight(
+        className={`flex justify-between p-default box-border relative min-h-80 ${getTileMinHeight(
           className,
         )} ${className}`}
         version={version}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -3,10 +3,10 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
+import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 import { renderBackwardButton } from './renderBackwardButton';
-import { style } from '../../utils/style';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
@@ -18,7 +18,10 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={style('overflow-hidden p-12 flex flex-col box-border min-h-[454px]', className)}
+      className={style(
+        'overflow-hidden p-default flex flex-col box-border min-h-[454px]',
+        className,
+      )}
       version={version}
       {...rest}
     >

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

@@ -0,0 +1,51 @@
+import '../../setup-fixture';
+import { RichTextBlock } from './RichTextBlock';
+import type { RichTextBlockContent } from './RichTextBlockContent';
+
+const HTML = `
+  <p class="h1">Заголовок 1</p>
+  <p class="h2">Заголовок 2</p>
+  <p class="h3">Заголовок 3</p>
+  <p class="h4">Заголовок 4</p>
+  <p class="h5">Заголовок 5</p>
+  <p class="h6">Заголовок 6</p>
+  <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
+  <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
+  <ul>
+    <li>Список с точками</li>
+    <li>Список с точками</li>
+  </ul>
+  <ol>
+    <li>Нумерованный список</li>
+    <li>Нумерованный список</li>
+  </ol>
+`;
+
+export const RICH_TEXT_SEPARATOR: RichTextBlockContent = {
+  __html:
+    '<table>' +
+    '<thead><tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr></thead>' +
+    '<tbody>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>' +
+    '<td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td></tr>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество\n' +
+    '«Негосударственный пенсионный фонд\n' +
+    '«Первый национальный пенсионный фонд»</p></td><td><p>Россия, г. Москва, ул. Большая Дмитровка,\n' +
+    'д. 23, стр.1</a></p></td><td><p>2,2%</p></td></tr>' +
+    '</tbody>' +
+    '</table>',
+  richVersion: 'horizontal-separator',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" __html={HTML} />
+    </div>
+  ),
+  'horizontal-separator': (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" {...RICH_TEXT_SEPARATOR} />
+    </div>
+  ),
+};

package/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Option, Select } from '../../ui-kit/Select/Select';
 import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {
@@ -14,7 +14,7 @@ interface WrapperSelectProps {
 
 export const WrapperSelect = JSX<WrapperSelectProps>(
   ({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
-    const dataFormat: OptionProps[] = data
+    const dataFormat: Option[] = data
       .filter(Boolean)
       .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
     const selectedObj = dataFormat.find((_) => _.key === selected);

package/src/components/SafeDepositRental/useGetRegions.ts

@@ -9,8 +9,10 @@ export interface Region {
   name?: string;
 }
 
+const EMPTY_VALUE = [];
+
 export function useGetRegions(): Region[] {
   const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
 
-  return data || [];
+  return data || EMPTY_VALUE;
 }

package/src/components/TariffsTable/TariffsTable.tsx

@@ -46,7 +46,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={`p-12 overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`}
+        className={`p-default overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`}
         {...rest}
       >
         {renderTitle({ title, description })}

package/src/components/TariffsTable/TariffsTable.ui.json

@@ -11,6 +11,9 @@
               "image": {
                 "ui:field": "picture"
               },
+              "dataUrl": {
+                "ui:widget": "sourceBook"
+              },
               "buttons": {
                 "items": {
                   "icon": {