@redneckz/wildless-cms-uni-blocks 0.9.4 → 0.9.6

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -1,3 +1,4 @@
+import type { CreditCalculatorParamsViewSettings } from './CalculatorContent';
 import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
 import { getMonthlyPayment } from './getMonthlyPayment';
 import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
@@ -6,6 +7,7 @@ import { useCalculatorParams } from './useCalculatorParams';
 export interface CommonCreditParams {
   isInsurance: boolean;
   isSalaryClient: boolean;
+  isPensionClient: boolean;
   isStateEmployee: boolean;
 }
 export interface CreditCalculatorSourceBookParams extends CommonCreditParams {
@@ -35,18 +37,44 @@ export type CreditCalculatorData = {
 export const useCreditCalculatorParams = (
   userInputParams: CreditCalculatorUserInputParams,
   sourceBookDir?: string,
+  paramsViewSettings?: CreditCalculatorParamsViewSettings,
 ): CreditCalculatorParams => {
-  const { isInsurance, isSalaryClient, isStateEmployee, moneyValue, monthsValue } = userInputParams;
-
+  const { moneyValue, monthsValue } = userInputParams;
   const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
   const creditCalculatorSourceBookParams =
-    data?.rows?.find((_) => {
+    data?.rows?.find((row) => {
+      const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
+      const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
+      const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
+      const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
+
       return (
-        isInsurance === _.isInsurance &&
-        isSalaryClient === _.isSalaryClient &&
-        isStateEmployee === _.isStateEmployee &&
-        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
-        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _)
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isSalaryClient',
+          isExclude: isExcludeSalaryClient,
+        }) &&
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isStateEmployee',
+          isExclude: isExcludeStateEmployee,
+        }) &&
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isPensionClient',
+          isExclude: isExcludePensionClient,
+        }) &&
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isInsurance',
+          isExclude: isExcludeInsurance,
+        }) &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)
       );
     }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
 
@@ -62,3 +90,13 @@ export const useCreditCalculatorParams = (
     monthlyPayment,
   };
 };
+
+interface CheckRowByParamProps {
+  row: CreditCalculatorSourceBookParams;
+  userInputParams: CreditCalculatorUserInputParams;
+  paramKey: string;
+  isExclude: boolean;
+}
+
+const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }: CheckRowByParamProps) =>
+  isExclude || userInputParams[paramKey] === row[paramKey];

package/src/components/Carousel/Carousel.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -24,7 +25,6 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     isCyclic = false,
     arrowsPadded = true,
     isPadding = true,
-    options,
     ...rest
   }) => {
     const { blocks: childBlocks } = rest.block || {};
@@ -59,18 +59,16 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={ITEMS_GAP}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {isBankHistoryCarousel
-              ? renderChildren({
-                  ...rest,
-                  options: {
-                    ...options,
-                    extraProps: {
+            {renderChildren({
+              ...rest,
+              renderProps: isBankHistoryCarousel
+                ? (block, options) =>
+                    renderBlock(block, options, {
                       blocksLength: childBlocks?.length,
                       activeIndex: activeIndex,
-                    },
-                  },
-                })
-              : renderChildren({ ...rest, options })}
+                    })
+                : renderBlock,
+            })}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -52,7 +52,8 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
 );
 
 const renderColorOption = (color: ProductColorVersion, i: number) => (
-  <span
+  <div
+    role="figure"
     key={String(i)}
     className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -1,41 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { Text } from '../../ui-kit/Text/Text';
-import { useLink } from '../../hooks/useLink';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
 import type { CarouselEventCardContent } from './CarouselEventCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlockProps {}
 
 export const CarouselEventCard = JSX<CarouselEventCardProps>(
   ({ className = '', icon, title, description, href, target, ...rest }) => {
-    const link = useLink();
-    const adjustedProps = link({ href, target });
-    const tagName = href ? 'a' : 'section';
-
     return (
-      <BlockWrapper
-        className={style('flex flex-col w-[365px]', className)}
-        extraProps={adjustedProps}
-        tag={tagName}
-        {...rest}
-      >
-        {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
-        {icon?.src ? <Img image={icon} /> : null}
-        {title ? (
-          <Heading headingType="h6" as="h4" className="text-left mb-2" title={title} />
-        ) : null}
-        {description ? (
-          <div className="mb-4">
-            <Text font="font-light" size="text-s" color="text-secondary-text">
-              {description}
-            </Text>
-          </div>
-        ) : null}
+      <BlockWrapper className={style('w-[365px]', className)} {...rest}>
+        <LinkWrapper className="flex flex-col" href={href} target={target}>
+          {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+          {icon?.src ? <Img image={icon} /> : null}
+          {title ? (
+            <Heading headingType="h6" as="h4" className="text-left mb-2" title={title} />
+          ) : null}
+          {description ? (
+            <div className="mb-4">
+              <Text font="font-light" size="text-s" color="text-secondary-text">
+                {description}
+              </Text>
+            </div>
+          ) : null}
+        </LinkWrapper>
       </BlockWrapper>
     );
   },

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { style } from '../../utils/style';
 import { Text } from '../../ui-kit/Text/Text';
-import { useLink } from '../../hooks/useLink';
-import type { BlockVersion } from '../../model/BlockVersion';
+import { style } from '../../utils/style';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
-import type { Picture } from '../../model/Picture';
-import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
@@ -32,31 +32,25 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     version = 'primary',
     ...rest
   }) => {
-    const link = useLink();
-    const adjustedProps = link({ href, target });
-    const tagName = href ? 'a' : 'section';
-
     return (
       <BlockWrapper
         className={style(
-          'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
+          'justify-between min-w-[260px]',
           'box-border border-solid border border-gray',
           align,
           className,
         )}
-        extraProps={adjustedProps}
-        tag={tagName}
         version={version}
         {...rest}
       >
-        <div className="flex flex-col h-full">
+        <LinkWrapper className="p-6" href={href} target={target}>
           {renderImage(icon)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
           {renderItems(items, isDotted, version)}
           {renderAdditionalDescription(additionalDescription)}
-        </div>
-        {renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })}
+        </LinkWrapper>
+        {renderButtonsSection([button], { className: 'p-6 pt-0', isVertical: true })}
       </BlockWrapper>
     );
   },
@@ -72,7 +66,11 @@ const renderImage = (image?: Picture) => (
 );
 
 const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
-  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
+  title ? (
+    <div>
+      <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text>
+    </div>
+  ) : null;
 
 const renderDescription = (description?: string, title?: string) =>
   description ? (

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -4,34 +4,29 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
-import { useLink } from '../../hooks/useLink';
 import { style } from '../../utils/style';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, list = [], href, target, ...rest }) => {
-    const link = useLink();
-    const adjustedProps = link({ href, target });
-    const tagName = href ? 'a' : 'section';
-
     return (
-      <BlockWrapper
-        tag={tagName}
-        className={style('border border-gray flex min-w-[536px]', className)}
-        extraProps={adjustedProps}
-        {...rest}
-      >
-        <div className="w-[200px] min-w-[200px] self-center">
-          {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
-          {icon?.src ? <Img image={icon} /> : null}
-        </div>
-        <div className="p-8 pl-3 w-full">
-          {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
-          {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
-        </div>
+      <BlockWrapper className={style('border border-gray min-w-[536px]', className)} {...rest}>
+        <LinkWrapper className="flex" href={href} target={target}>
+          <div className="w-[200px] min-w-[200px] self-center">
+            {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+            {icon?.src ? <Img image={icon} /> : null}
+          </div>
+          <div className="p-8 pl-3 w-full">
+            {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
+            {list.length ? (
+              <div className="flex flex-col gap-3">{list?.map(renderList)}</div>
+            ) : null}
+          </div>
+        </LinkWrapper>
       </BlockWrapper>
     );
   },

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { SocialMedia } from '../Footer/SocialMedia';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
-import { useLink } from '../../hooks/useLink';
+import { SocialMedia } from '../Footer/SocialMedia';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 
 const BORDER_STYLE =
   'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
@@ -33,10 +33,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     version = 'primary',
     ...rest
   }) => {
-    const link = useLink();
-    const adjustedProps = link({ href, target });
-    const tagName = href ? 'a' : 'section';
-
     return (
       <BlockWrapper
         className={style(
@@ -44,30 +40,34 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           BORDER_STYLE,
           className,
         )}
-        extraProps={adjustedProps}
-        tag={tagName}
         version={version}
         {...rest}
       >
-        <div className="self-center">
-          {title ? <Heading headingType="h3" as="h3" className="mb-8" title={title} /> : null}
-        </div>
-        <div className="mb-5">
-          {description ? (
-            <Paragraph size="text-xl" font="font-light" color="group-data-gray:text-secondary-text">
-              {description}
-            </Paragraph>
-          ) : null}
-        </div>
-        <div className="flex align-center w-full">
-          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
-            {items.length ? (
-              <List className="text-xl-light flex flex-col gap-2 pb-16 mb-3" items={items} />
+        <LinkWrapper className="flex flex-col" href={href} target={target}>
+          <div className="self-center">
+            {title ? <Heading headingType="h3" as="h3" className="mb-8" title={title} /> : null}
+          </div>
+          <div className="mb-5">
+            {description ? (
+              <Paragraph
+                size="text-xl"
+                font="font-light"
+                color="group-data-gray:text-secondary-text"
+              >
+                {description}
+              </Paragraph>
             ) : null}
-            {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
           </div>
-          {renderIconBlock(icon, items)}
-        </div>
+          <div className="flex align-center w-full">
+            <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
+              {items.length ? (
+                <List className="text-xl-light flex flex-col gap-2 pb-16 mb-3" items={items} />
+              ) : null}
+              {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
+            </div>
+            {renderIconBlock(icon, items)}
+          </div>
+        </LinkWrapper>
       </BlockWrapper>
     );
   },

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -14,9 +14,9 @@ const COMMON_PROPS: StepsBlockProps = {
 
 const STEPS: Step[] = [
   {
-    type: 'default',
-    label: 'Заявка на кредит',
-    description: 'Оставьте онлайн-заявку на потребительский кредит',
+    type: 'rte',
+    __html:
+      '<p><strong>Рассчитайте условия</strong> на онлайн-калькуляторе и оставьте заявку на потребительский кредит</p>',
   },
   {
     type: 'default',

package/src/components/StepsBlock/renderStep.tsx

@@ -5,7 +5,6 @@ import { Button } from '../../ui-kit/Button/Button';
 import { List } from '../../ui-kit/List/List';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
-import { assertUnreachable } from '../../utils/assertUnreachable';
 import { style } from '../../utils/style';
 import type { DefaultStep, Step } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
@@ -19,8 +18,6 @@ interface RenderStepProps {
 // TODO: Create universal function for this case
 export const renderStep =
   (props: RenderStepProps) =>
-  // Linter doesn't understand that switch processes all cases
-  // eslint-disable-next-line consistent-return
   (step: Step, i: number, arr: Step[]): VNode => {
     const { type } = step;
 
@@ -32,9 +29,13 @@ export const renderStep =
       case 'default':
         return renderDefaultStep(props)(step, i, arr);
       case 'rte':
-        return <RichText __html={step.__html} />;
+        return (
+          <div key={String(i)} className={style('text-center', getContainerWidth(arr.length))}>
+            <RichText __html={step.__html} />
+          </div>
+        );
       default:
-        assertUnreachable(step);
+        return null;
     }
   };
 

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignTypeWithStretch } from '../../model/AlignType';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
@@ -25,7 +26,6 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
     isInnerPadding = true,
     version = 'transparent',
     isTheme = false,
-    options,
     ...rest
   }) => {
     const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
@@ -43,7 +43,11 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
         isTheme={isTheme}
         {...rest}
       >
-        {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
+        {renderChildren({
+          ...rest,
+          renderProps: (block, options) =>
+            renderBlock(block, options, { className: innerPaddingStyle }),
+        })}
       </BlockWrapper>
     );
   },

package/src/ui-kit/BlockWrapper.tsx

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../EventBus/defaultEventBus';
-import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
-import { style } from '../utils/style';
 import type { BlockVersion } from '../model/BlockVersion';
 import type { UniBlockProps } from '../model/JSXBlock';
+import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
+import { style } from '../utils/style';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
   role?: string;
-  extraProps?: Record<string, any>;
 }
 
 export const blockStyles: Record<BlockVersion, string> = {
@@ -24,11 +23,10 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   ({
     className = '',
     version = 'primary',
+    isTheme = true,
     block,
     tag = 'section',
     role,
-    isTheme = true,
-    extraProps = {},
     children,
   }) => {
     const Tag: any = tag;
@@ -57,7 +55,6 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         {...(version && isTheme ? { 'data-ver': version } : {})}
         {...(block?.anchor ? { id: block.anchor, ref } : {})}
         role={role}
-        {...extraProps}
       >
         {children}
       </Tag>

package/src/ui-kit/LinkWrapper/LinkWrapper.tsx

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { Target } from '../../model/LinkProps';
+
+interface LinkWrapperProps {
+  className?: string;
+  href?: string;
+  target?: Target;
+}
+
+export const LinkWrapper = JSX<LinkWrapperProps>(({ className = '', href, target, children }) => {
+  const link = useLink();
+  const linkProps = link({ href, target });
+  const Tag = href ? 'a' : 'div';
+
+  return (
+    <Tag className={className} {...(href ? linkProps : {})}>
+      {children}
+    </Tag>
+  );
+});