@redneckz/wildless-cms-uni-blocks 0.8.8 → 0.8.10

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

@@ -1,16 +1,20 @@
 import '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
+import type { Step } from './StepsBlockContent';
 
-const steps = [
+const steps: Step[] = [
   {
+    type: 'default',
     label: 'Заявка на кредит',
     description: 'Оставьте онлайн-заявку на потребительский кредит',
   },
   {
+    type: 'default',
     label: 'В случае одобрения',
     description: 'Менеджер свяжется с вами и согласует встречу',
   },
   {
+    type: 'default',
     label: 'Получение наличных',
     description: 'Получите наличные в отделении банка',
   },
@@ -49,19 +53,23 @@ export default {
           size="small"
           steps={[
             {
+              type: 'default',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
               icon: { icon: 'ClockIcon' },
             },
             {
+              type: 'default',
               label: 'В случае одобрения',
               icon: { icon: 'SignDocsIcon' },
             },
             {
+              type: 'default',
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
               icon: { icon: 'ComfortableCompIcon' },
             },
             {
+              type: 'default',
               label: 'Получение наличных',
               icon: { icon: 'ClockIcon' },
             },
@@ -78,14 +86,17 @@ export default {
           size="small"
           steps={[
             {
+              type: 'default',
               label: 'Заявка на кредит',
               icon: { icon: 'EmptyWalletIcon' },
             },
             {
+              type: 'default',
               label: 'В случае одобрения',
               icon: { icon: 'PercentageSquareIcon' },
             },
             {
+              type: 'default',
               label: 'Получение наличных',
               icon: { icon: 'CalendarIcon' },
             },
@@ -128,19 +139,23 @@ export default {
           size="small"
           steps={[
             {
+              type: 'default',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
               icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             },
             {
+              type: 'default',
               label: 'В случае одобрения',
               icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
             },
             {
+              type: 'default',
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
               icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
             },
             {
+              type: 'default',
               label: 'Получение наличных',
               icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             },
@@ -158,14 +173,17 @@ export default {
           size="small"
           steps={[
             {
+              type: 'default',
               label: 'Заявка на кредит',
               icon: { icon: 'EmptyWalletIcon' },
             },
             {
+              type: 'default',
               label: 'В случае одобрения',
               icon: { icon: 'PercentageSquareIcon' },
             },
             {
+              type: 'default',
               label: 'Получение наличных',
               icon: { icon: 'CalendarIcon' },
             },

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

@@ -1,12 +1,12 @@
 import '../../setup-fixture';
 import type { StepsBlockProps } from './StepsBlock';
 import { StepsBlock } from './StepsBlock';
-import type { Step } from './StepsBlockContent';
+import type { DefaultStep, Step } from './StepsBlockContent';
 
 const TITLE =
   'Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит';
 
-const ITEMS: Step['items'] = ['item1', 'item2', 'item3', 'item4', 'item5'];
+const ITEMS: DefaultStep['items'] = ['item1', 'item2', 'item3', 'item4', 'item5'];
 const COMMON_PROPS: StepsBlockProps = {
   className: 'col-span-12',
   title: TITLE,
@@ -14,18 +14,22 @@ const COMMON_PROPS: StepsBlockProps = {
 
 const STEPS: Step[] = [
   {
+    type: 'default',
     label: 'Заявка на кредит',
     description: 'Оставьте онлайн-заявку на потребительский кредит',
   },
   {
+    type: 'default',
     label: 'В случае одобрения',
     description: 'Менеджер свяжется с вами и согласует встречу',
   },
   {
+    type: 'default',
     label: 'Получение наличных',
     description: 'Получите наличные в отделении банка',
   },
   {
+    type: 'default',
     label: 'Последний шаг!',
     description: 'Получите наличные в отделении банка',
   },
@@ -33,23 +37,26 @@ const STEPS: Step[] = [
 
 const STEPS_WITH_ICONS: Step[] = [
   {
+    type: 'default',
     label: 'В мобильном приложении или интернет-банке',
     description: 'Для всех клиентов Россельхозбанка',
     icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
   },
   {
+    type: 'default',
     label: 'Через Госуслуги',
     description: 'При наличии данных в Единой биометрической системе',
     icon: { icon: 'ClockIcon', iconVersion: 'normal' },
   },
   {
+    type: 'default',
     label: 'В офисах Россельхозбанка',
     description: 'Откройте вклад',
     icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
   },
 ];
 
-const BUTTONS: Step['button'][] = [
+const BUTTONS: DefaultStep['button'][] = [
   { text: 'Войти в интернет-банк' },
   { text: 'Оформить' },
   { text: 'Офисы на карте' },

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -5,9 +5,11 @@ import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
+import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
@@ -50,7 +52,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map(renderStepTitle(size, version, showLines))}
+              {steps.map(renderStep(size, version, showLines))}
             </div>
           </div>
         ) : null}
@@ -59,9 +61,31 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepTitle =
+// TODO: Create universal function for this case
+const renderStep =
   (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
   (step: Step, i: number, steps: Step[]) => {
+    const { type } = step;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return renderDefaultStep(size, version, showLines)(step, i, steps);
+      case 'rte':
+        return <RichText __html={step.__html} />;
+      default:
+        assertUnreachable(step);
+    }
+  };
+
+const renderDefaultStep =
+  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (step: DefaultStep, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
     const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
@@ -106,7 +130,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
       <span className={`font-medium flex self-center ${iconTextSize}`}>
-        {checkIsIconRenderable(step?.icon) ? (
+        {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={getIconWithVersion({ ...step.icon }, version)}
             width={iconSize}

package/src/components/StepsBlock/StepsBlock.tsx

@@ -5,10 +5,11 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { joinList } from '../../utils/joinList';
-import { renderStepContent } from './renderStepContent';
+import { style } from '../../utils/style';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
+import { renderStep } from './renderStep';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
@@ -20,39 +21,50 @@ const getLineOpacity = (showLines: boolean) => (showLines ? '' : 'opacity-0');
 const getPaddingX = (steps: number) => (steps < 5 ? 'px-[88px]' : 'px-[55px]');
 
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className = '', showLines = true, steps = [], button, version = 'primary', ...rest }) => {
-    const { title } = rest;
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
+  ({
+    className = '',
+    showLines = true,
+    steps = [],
+    button,
+    version = 'primary',
+    title,
+    ...rest
+  }) => {
     const shortGaps = steps.length > 3;
+
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
+
     const lineOpacity = getLineOpacity(showLines);
-    const titleMargin = title ? 'mt-9' : '';
     const paddingX = getPaddingX(steps.length);
 
     return (
       <BlockWrapper
-        className={[
+        className={style(
           'box-border py-12',
           shortGaps ? 'px-20' : 'px-[70px]',
           'flex flex-col items-center overflow-hidden',
           className,
-        ].join(' ')}
+        )}
         version={version}
         {...rest}
       >
         {title ? (
-          <Heading headingType="h3" className="max-w-[752px] text-center" title={title} />
+          <Heading headingType="h3" className="max-w-[752px] text-center mb-9" title={title} />
         ) : null}
         {steps?.length ? (
-          <div className={`box-border ${titleMargin}`}>
-            <div className={`flex items-center ${paddingX}`}>
-              {joinList(<div className={`h-0.5 w-full bg-secondary-light ${lineOpacity}`} />)(
+          <div className="box-border">
+            <div className={style('flex items-center', paddingX)}>
+              {joinList(<div className={style('h-0.5 w-full bg-secondary-light', lineOpacity)} />)(
                 steps.map(renderStepIcon(styleMap, version)),
               )}
             </div>
-            <div className={`flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
-              {steps.map(
-                renderStepContent({ styleMap, isMainButton: Boolean(button?.text), version }),
+            <div
+              className={style(
+                'flex justify-between mt-4',
+                shortGaps ? 'gap-x-3' : 'gap-x-[101px]',
               )}
+            >
+              {steps.map(renderStep({ styleMap, isMainButton: Boolean(button?.text), version }))}
             </div>
           </div>
         ) : null}
@@ -70,7 +82,7 @@ const renderStepIcon =
         <div
           className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`}
         >
-          {checkIsIconRenderable(icon) ? (
+          {checkCanRenderIcon(icon) ? (
             <Img image={getIconWithVersion(icon || {}, version)} width="48" height="48" asSVG />
           ) : (
             <span className={`text-h4 ${styleMap.iconText}`}>{i + 1}</span>

package/src/components/StepsBlock/StepsBlock.ui.json

@@ -12,6 +12,12 @@
           "iconRight": {
             "ui:field": "icon"
           }
+        },
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
         }
       }
     }

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
+import type { RichTextItem } from '../../model/RichTextItem';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
@@ -16,10 +18,20 @@ type StepCommonProps = IconProps & {
   items?: string[];
 };
 
+/**
+ * @title Стандартный
+ */
+export type DefaultStep = DescriptionProps & LabelProps & StepCommonProps & DefaultListItemType;
+
+/**
+ * @title Форматированный текст
+ */
+type RichTextStep = RichTextItem & IconProps;
+
 /**
  * @title Шаг
  */
-export type Step = DescriptionProps & LabelProps & StepCommonProps;
+export type Step = DefaultStep | RichTextStep;
 
 /**
  * @title Блок шаги

package/src/components/StepsBlock/checkCanRenderIcon.ts

@@ -0,0 +1,3 @@
+import type { Picture } from '../../model/Picture';
+
+export const checkCanRenderIcon = (icon?: Picture) => Boolean(icon?.icon || icon?.src);

package/src/components/StepsBlock/renderStep.tsx

@@ -0,0 +1,83 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { VNode } from '../../model/VNode';
+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';
+
+interface RenderStepProps {
+  styleMap: StyleType;
+  isMainButton: boolean;
+  version?: BlockVersion;
+}
+
+// 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;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return renderDefaultStep(props)(step, i, arr);
+      case 'rte':
+        return <RichText __html={step.__html} />;
+      default:
+        assertUnreachable(step);
+    }
+  };
+
+const renderDefaultStep =
+  ({ styleMap, isMainButton, version }: RenderStepProps) =>
+  (step: DefaultStep, i: number, arr: Step[]) => {
+    const { label, description, button, items, isDotted } = step;
+
+    return (
+      <div
+        key={String(i)}
+        className={style(
+          'relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden',
+          getContainerWidth(arr.length),
+        )}
+      >
+        <div className={style(button?.text ? 'mb-8' : '', 'text-center')}>
+          {label ? (
+            <div className="mb-2">
+              <Text size="text-h6">{label}</Text>
+            </div>
+          ) : null}
+          <div className="flex flex-col items-center">
+            {description ? <div className={styleMap.description}>{description}</div> : null}
+            <List
+              className={style(description ? `${styleMap.description} mt-0.5` : 'text-h6')}
+              items={items}
+              listItemSize="M"
+              isDotted={isDotted}
+            />
+          </div>
+        </div>
+        {button?.text && !isMainButton ? (
+          <Button
+            className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
+            version={version as ButtonVersion}
+            {...button}
+          >
+            {button?.text}
+          </Button>
+        ) : null}
+      </div>
+    );
+  };
+
+const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[210px]');

package/src/components/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { EventBus } from '../../EventBus/EventBus';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
@@ -21,7 +21,7 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   useEffect(
     () =>
-      EventBus.inst.subscribe('tab', (event) => {
+      defaultEventBus.subscribe('tab', (event) => {
         const tab = tabs?.find(checkTab(event));
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
@@ -35,14 +35,14 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
   useEffect(
     () =>
       currentTab?.type === 'group'
-        ? EventBus.inst.subject('tab', { type: currentTab.type, label: currentTab.ref })
+        ? defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref })
         : undefined,
     [currentTab],
   );
 
   const handleClick = useCallback((selectedTab: TabData) => {
     if (selectedTab?.type === 'group') {
-      EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
+      defaultEventBus.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
     }
     setCurrentTab(selectedTab);
   }, []);

package/src/components/Tile/Tile.example.json

@@ -2,7 +2,7 @@
   "content": {
     "title": "Плитка",
     "headingType": "h3",
-    "description": "Описание",
+    "__html": "<p>Описание</p>",
     "image": {
       "format": "webp",
       "size": {

package/src/components/Tile/Tile.fixture.tsx

@@ -46,8 +46,8 @@ export const TILE: TileContent = {
 export const TILE_PREMIUM: TileContent = {
   title: 'Премиальные продукты',
   headingType: 'h4',
-  description:
-    'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус',
+  __html:
+    '<p>Выделенные зоны обслуживания и персональный финансовый консультант. <strong>Полный спектр</strong> премиальных продуктов, <u>подчеркивающих</u> ваш статус</p>',
   buttons: [
     {
       href: 'https://rshb.ru',

package/src/components/Tile/Tile.tsx

@@ -5,7 +5,7 @@ import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -18,7 +18,7 @@ export const Tile = JSX<TileProps>(
   ({
     title,
     headingType = 'h3',
-    description,
+    __html,
     items,
     buttons,
     image,
@@ -52,9 +52,9 @@ export const Tile = JSX<TileProps>(
         })}
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
-        {description ? (
+        {__html ? (
           <div className="max-w-[600px] mt-2.5">
-            <Paragraph size="text-xl-light">{description}</Paragraph>
+            <RichText __html={__html} />
           </div>
         ) : null}
         {children}

package/src/components/Tile/Tile.ui.json

@@ -1 +1,7 @@
-{}
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/src/components/Tile/TileContent.ts

@@ -1,17 +1,17 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { DescriptionProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { ListItemSize } from '../../ui-kit/List/ListProps';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 
 /**
  * @title Плитка
  */
 export type TileContent = HeadingCommonProps &
-  DescriptionProps &
+  RichTextProps &
   ListContent &
   ButtonContent &
   TagsContent & {

package/src/hooks/useLink.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../model/LinkProps';
 import { projectSettings } from '../ProjectSettings';
-import { useBlockRouter } from '../services/BlockRouter/useBlockRouter';
+import { gotoBlock } from '../services/BlockRouter/BlockRouter';
 import { isHash, isLocalURL, joinPath } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
@@ -15,7 +15,6 @@ interface Clickable {
 
 export function useLink(isRemote?: boolean) {
   const router = useRouter();
-  const blockRouter = useBlockRouter();
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
@@ -44,7 +43,7 @@ export function useLink(isRemote?: boolean) {
       // Client routing
       ev?.preventDefault();
       if (isHash(href)) {
-        blockRouter.goto(href);
+        gotoBlock(router, href);
       } else if (href) {
         router.push(href);
       }

package/src/hooks/useRouter.ts

@@ -1,10 +1,14 @@
+interface RouterOptions {
+  scroll?: boolean;
+}
+
 export interface Router {
   pathname: string;
   query: Record<string, string | string[] | undefined>;
   href?: string;
   basePath?: string;
-  push: (url: string) => void;
-  replace: (url: string) => void;
+  push: (url: string, as?: string, options?: RouterOptions) => void;
+  replace: (url: string, as?: string, options?: RouterOptions) => void;
 }
 
 export function useRouter(): Router {