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

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+import type { PromoTileContent } from './PromoTileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -8,15 +8,10 @@ import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
-import type { PromoTileContent } from './PromoTileContent';
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
-const promoTileStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const PromoTile = JSX<PromoTileProps>(
   ({
     className = '',
@@ -32,7 +27,7 @@ export const PromoTile = JSX<PromoTileProps>(
       <BlockWrapper
         context={context}
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
-          promoTileStyleMap[version]
+          VersionStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
         {...rest}
       >
@@ -40,17 +35,15 @@ export const PromoTile = JSX<PromoTileProps>(
           context={context}
           title={
             title ? (
-              <div>
-                <Headline
-                  context={context}
-                  title={title}
-                  className={`!p-0 max-w-[600px]`}
-                  headlineVersion={getTileHeadingType(className)}
-                  bgColorHeadline={version}
-                  align="left"
-                  as="h2"
-                />
-              </div>
+              <Headline
+                context={context}
+                title={title}
+                className={`!p-0 max-w-[600px]`}
+                headlineVersion={getTileHeadingType(className)}
+                bgColorHeadline={version}
+                align="left"
+                as="h2"
+              />
             ) : null
           }
           buttons={

package/mobile/src/components/PromoTile/PromoTileContent.ts

@@ -1,13 +1,13 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionProps } from '../../model/HeadlineType';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionProp } from '../../model/HeadlineType';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 
 /**
  * @title Акции
  */
 export type PromoTileContent = HeadingCommonProps &
-  DescriptionProp &
+  DescriptionProps &
   ButtonContent & {
     /** @title Дата публикации */
     date?: string;

package/mobile/src/components/Recommendation/RecommendationContent.ts

@@ -1,21 +1,21 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { LinkProps } from '../../model/LinkProps';
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { LinkCommonProps } from '../../model/LinkProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { HeadlineCommonProps, TitleProp } from '../../model/HeadlineType';
 
 export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
   /**
    * @title Соц сети
    * @minItems 3
    */
-  socialMedia?: LinkProps[];
+  socialMedia?: LinkCommonProps[];
 }
 
 /**
  * @title Рекомендации
  */
-export interface RecommendationContent extends TitleProp {
+export interface RecommendationContent extends TitleProps {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -15,6 +15,10 @@ const DATA = {
     {
       city: 'Москва',
       offices: [
+        {
+          office: 'выберите отделение',
+          rate: null,
+        },
         {
           office: 'МоскваОфис1',
           rate: 1,

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -139,7 +139,7 @@ export const renderRentalPeriod = (days, setDays) => {
 
 // TODO: В качестве компонента не годится
 const RadioButtons = JSX<any>(() => {
-  const [selected, setSelected] = useState('option1');
+  const [selected, setSelected] = useState('option2');
   const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelected(_.target.value);
 
   return (

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

@@ -67,7 +67,7 @@ const renderStepTitle =
     return (
       <div key={String(i)}>
         <div className="flex flex-row text-center relative">
-          <div className="overflow-hidden">
+          <div className="overflow-hidden flex-shrink-0">
             {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div

package/mobile/src/components/Tabs/Tabs.example.json

@@ -2,14 +2,17 @@
   "showCounter": true,
   "tabs": [
     {
+      "type": "group",
       "ref": "tab1",
       "title": "Вкладка 1"
     },
     {
+      "type": "group",
       "ref": "tab2",
       "title": "Вкладка 2"
     },
     {
+      "type": "group",
       "ref": "tab3",
       "title": "Вкладка 3"
     }

package/mobile/src/components/Tabs/Tabs.tsx

@@ -4,25 +4,33 @@ import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
-import type { Tab, TabsContent, TabType } from './TabsContent';
+import type { Tab, TabsContent } from './TabsContent';
 
 export interface TabActivationEvent {
-  type?: TabType;
+  type?: Tab['type'];
   label?: string;
 }
 
-export interface TabsProps extends TabsContent, UniBlockProps {}
+export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
-export const Tabs = JSX<TabsProps>((props) => {
+export const Tabs = JSX<TabsBlockProps>((props) => {
   const { context, className, tabs, page, showCounter } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
-  useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.ref }), [currentTab]);
+  useEffect(() => {
+    if (currentTab?.type === 'group') {
+      return EventBus.inst.subject('tab', { label: currentTab.ref });
+    }
+
+    return undefined;
+  }, [currentTab]);
 
   const handleClick = (selectedTab: Tab) => {
-    EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
-    setCurrentTab(selectedTab);
+    if (selectedTab?.type === 'group') {
+      EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
+      setCurrentTab(selectedTab);
+    }
   };
 
   return (

package/mobile/src/components/Tabs/TabsContent.ts

@@ -1,20 +1,24 @@
-export type TabType = 'group' | 'link';
+import type { LinkProps } from '../../model/LinkProps';
 
-/**
- *  @title Таб
- */
-export interface Tab {
-  /** @title Тег или ссылка */
+export interface GroupTab {
+  /** @default group */
+  type: 'group';
+  /** @title Тег */
   ref?: string;
-  /**
-   * @title Тип
-   * @enumNames ['Группирующий', 'Ссылочный']
-   */
-  type?: TabType;
   /** @title Название */
   title?: string;
 }
 
+export type LinkTab = LinkProps & {
+  /** @default link */
+  type: 'link';
+};
+
+/**
+ *  @title Таб
+ */
+export type Tab = GroupTab | LinkTab;
+
 /**
  * @title Вкладки
  */

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,4 +1,4 @@
-import { RenderTabProps } from './renderTab';
+import type { RenderTabProps } from './renderTab';
 import {
   ACTIVE_LINK_CLASSES,
   ACTIVE_TEXT_CLASSES,
@@ -7,7 +7,7 @@ import {
   LINK_CLASSES,
   TEXT_CLASSES,
 } from './tabItemClasses';
-import { Tab } from './TabsContent';
+import type { GroupTab } from './TabsContent';
 
 const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
 const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
@@ -15,7 +15,7 @@ const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:
 
 export const renderGroupTab =
   ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
-  (tab: Tab, i: number) => {
+  (tab: GroupTab, i: number) => {
     const active = currentTab === tab;
 
     const count = tab.ref

package/mobile/src/components/Tabs/renderTab.tsx

@@ -1,6 +1,6 @@
 import { useLink } from '../../hooks/useLink';
 import type { ContentPageDef } from '../../types';
-import { isURL } from '../../utils/url';
+import { assertUnreachable } from '../../utils/assertUnreachable';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { renderGroupTab } from './renderGroupTab';
 import { renderLinkTab } from './renderLinkTab';
@@ -16,16 +16,27 @@ export interface RenderTabProps {
 
 export const renderTab =
   ({ onClick, currentTab, showCounter, page, context }: RenderTabProps) =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
   (tab: Tab, i: number) => {
     const { useRouter, handlerDecorator } = context;
     const router = useRouter();
 
-    if (isURL(tab?.ref)) {
-      return renderLinkTab({
-        ...useLink({ router, handlerDecorator }, { href: tab.ref, text: tab.title }),
-        i,
-      });
+    const type = tab.type;
+
+    if (!(type === 'group' || type === 'link')) {
+      return null;
     }
 
-    return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
+    switch (type) {
+      case 'group':
+        return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
+      case 'link':
+        return renderLinkTab({
+          ...useLink({ router, handlerDecorator }, tab),
+          i,
+        });
+      default:
+        assertUnreachable(type);
+    }
   };

package/mobile/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -0,0 +1,67 @@
+import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import { List } from '../../ui-kit/List/List';
+import type { ListProps } from '../../ui-kit/List/ListProps';
+import type { LabelDescriptionCell } from './TariffsTableContent';
+import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
+
+export interface LabelProps {
+  label?: string;
+}
+
+export type EmbeddableCellDataType =
+  | ButtonContent
+  | LabelDescriptionCell
+  | ImageContent
+  | ListProps;
+
+const renderButtonsCellData = ({ buttons }: ButtonContent) =>
+  buttons && buttons?.length ? (
+    <div>
+      {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+        <Button
+          className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
+          key={String(idx)}
+          ariaLabel={getButtonAriaLabel(icon)}
+          rounded={rounded}
+          appendLeft={
+            icon?.src || icon?.icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null
+          }
+          {...buttonProps}
+          aria-label={icon}
+        />
+      ))}
+    </div>
+  ) : null;
+
+const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
+  const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
+
+  return (
+    <div>
+      {label ? <div className={labelClassName}>{label}</div> : null}
+      {description ? <div className="text-s text-secondary-text">{description}</div> : null}
+    </div>
+  );
+};
+
+const renderImgCellData = ({ image }: ImageContent) =>
+  image?.src ? <Img image={{ ...image, className: 'm-0' }} /> : null;
+
+const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
+  <List
+    className="flex flex-col justify-between items-start text-m"
+    version="gray"
+    isDotted={isDotted ?? true}
+    {...rest}
+  />
+);
+
+export const EmbeddableCellData = {
+  Buttons: renderButtonsCellData,
+  Img: renderImgCellData,
+  List: renderListCellData,
+  LabelDescription: renderLabelDescriptionCellData,
+};

package/mobile/src/components/TariffsTable/TariffsTable.example.json

@@ -22,31 +22,49 @@
       "title": "Параметр 4"
     }
   ],
-  "columns": [
+  "tariffsColumns": [
     {
       "data": [
         [
           {
-            "label": "Ячейка 1"
+            "tableCellType": "LabelDescription",
+            "label": "Ячейка 1-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "tableCellType": "List",
+            "isDotted": true,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+          },
+          {
+            "label": "Ячейка 1-2",
+            "tableCellType": "LabelDescription",
+            "description": "Описание"
+          },
+          {
+            "tableCellType": "List",
+            "isDotted": false,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
           }
         ],
         [
           {
-            "label": "Ячейка 2-1",
-            "description": "Описание для ячейки 2-1"
+            "tableCellType": "LabelDescription",
+            "label": "Ячейка 2-1"
           },
           {
-            "label": "Ячейка 2-2",
-            "description": "Описание для ячейки 2-2"
+            "tableCellType": "List",
+            "isDotted": true,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
           }
         ],
         [
           {
             "label": "Ячейка 3-1",
-            "description": "Описание для ячейки 3-1"
+            "tableCellType": "LabelDescription"
           },
           {
-            "label": "Ячейка 3-2",
+            "tableCellType": "Button",
             "buttons": [
               {
                 "icon": {
@@ -55,8 +73,7 @@
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",
-                "target": "_blank",
-                "text": ""
+                "target": "_blank"
               },
               {
                 "icon": {
@@ -65,29 +82,13 @@
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",
-                "target": "_blank",
-                "text": ""
+                "target": "_blank"
               }
             ]
           }
-        ],
-        [
-          {
-            "image": {
-              "format": "webp",
-              "size": {
-                "width": 288,
-                "height": 56
-              }
-            }
-          },
-          {
-            "list": {
-              "items": ["item 1", "item 2", "item 3"]
-            }
-          }
         ]
       ]
     }
-  ]
+  ],
+  "hiddenRowsNum": 2
 }

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type {
-  TariffsTableCellData,
+  CellDef,
   TariffsTableColumn,
   TariffsTableContent,
   TariffsTableRowHeader,
@@ -13,7 +13,15 @@ import { TariffsTableVertical } from './TariffsTableVertical';
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
-  ({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
+  ({
+    className,
+    context,
+    title,
+    description,
+    tariffsColumns: columns,
+    rowHeaders,
+    orientation = 'vertical',
+  }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
     const headingMargin = description ? 'mb-2' : 'mb-5';
@@ -34,7 +42,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
 function renderOrientationTable(orientation, tiles, context) {
   return orientation === 'vertical' ? (
-    <TariffsTableVertical tiles={tiles} />
+    <TariffsTableVertical context={context} tiles={tiles} />
   ) : (
     <TariffsTableHorizontal context={context} tiles={tiles} />
   );
@@ -43,10 +51,7 @@ function renderOrientationTable(orientation, tiles, context) {
 const getColData = (columns: TariffsTableColumn[] | undefined) =>
   columns?.[0].data ? columns[0].data : [];
 
-const getTiles = (
-  rowHeaders: TariffsTableRowHeader[] | undefined,
-  colData: TariffsTableCellData[][],
-) =>
+const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
   rowHeaders?.map((header, i) => ({
     header,
     data: colData?.[i] || [{}],

package/mobile/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,64 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
-import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
-import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
+import type { UniBlockProps } from '../../types';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { EmbeddableCellData } from './EmbeddableCellData';
+import type { CellDef, TariffsTableCellIndexProps } from './TariffsTableContent';
 
-export interface TariffsTableCellProps {
-  cell: TariffsTableCellData[];
+export interface TariffsTableCellProps extends UniBlockProps {
+  rowIdx: number;
+  cellIdx: number;
+  cells: CellDef[];
   isLastRow: boolean;
 }
 
-export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow }) => {
-  const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
-    isLastRow ? 'border-t-0 rounded-b-md' : ''
-  }`;
+export const TariffsTableCell = JSX<TariffsTableCellProps>(
+  ({ context, cells, isLastRow, rowIdx, cellIdx }) => {
+    const cellWrapperClasses = `first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
+      isLastRow ? 'border-t-0 rounded-b-md' : ''
+    }`;
 
-  return (
-    <div className={cellWrapperClasses} role="cell">
-      <div>{cell.map(renderCellInner)}</div>
-    </div>
-  );
-});
-
-const renderCellInner = (
-  { label, description, list, image, buttons }: TariffsTableCellData,
-  i: number,
-) => (
-  <div key={String(i)} className="first:pt-5 last:pb-5">
-    {i > 0 && (
-      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
-    )}
-    {label ? <div className="text-xl m-0">{label}</div> : null}
-    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
-    {list?.items?.length ? renderList(list) : null}
-    {image ? <Img image={image} /> : null}
-    {buttons?.length ? renderButtons(buttons) : null}
-  </div>
+    return (
+      <div className={cellWrapperClasses} role="cell">
+        {cells.map(renderCellInner(rowIdx, context, cellIdx))}
+      </div>
+    );
+  },
 );
 
-const renderList = (list: TariffsTableList) => (
-  <List
-    className="flex flex-col justify-between items-start text-s"
-    version="gray"
-    items={list.items}
-    isDotted={list.isDotted ?? true}
-  />
-);
+const renderCellInner =
+  (rowIdx: number, context: ContentPageContext, cellIdx: number) => (cell: CellDef, i: number) => {
+    return (
+      <div
+        key={String(i)}
+        className={cell?.tableCellType === 'Table' ? 'mx-0.5' : `first:pt-5 last:pb-5 pl-10`}
+      >
+        {i > 0 ? <div className="h-5" /> : null}
+        {renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })}
+      </div>
+    );
+  };
 
-const renderButtons = (buttons: ButtonWithIconProps[]) => (
-  <div>
-    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
-      <Button
-        className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
-        key={String(idx)}
-        ariaLabel={getButtonAriaLabel(icon)}
-        rounded={rounded}
-        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
-        {...buttonProps}
-      />
-    ))}
-  </div>
-);
+const renderCell = (
+  cell: CellDef,
+  context: ContentPageContext,
+  indexes: TariffsTableCellIndexProps,
+) => {
+  if (!cell) {
+    return null;
+  }
+
+  const { tableCellType: type, ...rest } = cell;
+
+  if (!type || !(type in EmbeddableCellData)) {
+    return null;
+  }
+
+  const EmbeddableCellInner = EmbeddableCellData[type];
+
+  return <EmbeddableCellInner context={context} {...rest} {...indexes} />;
+};