@redneckz/wildless-cms-uni-blocks 0.3.9 → 0.3.12

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

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface SelectProps {
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+export const Select = JSX<SelectProps>(({ className = '', id, name, children }) => {
+  return (
+    <select className={className} id={id} name={name || id}>
+      {children}
+    </select>
+  );
+});

package/mobile/src/ui-kit/Select/SelectOption.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface SelectOptionProps {
+  className?: string;
+  value?: string;
+}
+
+export const SelectOption = JSX<SelectOptionProps>(({ className = '', value, children }) => {
+  return (
+    <option className={className} value={`${value}`}>
+      {children}
+    </option>
+  );
+});

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { SwipeListControlList } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getScrollPoints } from './utils/getScrollPoints';
 import { getIndexParts } from './utils/getIndexParts';
-import { SwipeListControlList } from './SwipeListControlList';
-import { SwipeListControlDots } from './SwipeListControlDots';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { getScrollPoints } from './utils/getScrollPoints';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,6 +14,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
+    onSlideChange,
   }) => {
     const [activeIndex, setActiveIndex] = context.useState<number>(0);
     const [indexFraction, setIndexFraction] = context.useState<number>(0);
@@ -35,28 +36,35 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       });
 
       const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      if (index !== activeIndex && onSlideChange) {
+        onSlideChange();
+      }
       setActiveIndex(index);
       setIndexFraction(fraction);
     };
 
     return (
       <div className={className}>
-        <SwipeListControlList
-          gap={gap}
-          padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
-        >
-          {children}
-        </SwipeListControlList>
-        <SwipeListControlDots
-          activeIndex={activeIndex}
-          indexFraction={indexFraction}
-          showDots={showDots}
-        >
-          {children}
-        </SwipeListControlDots>
+        {renderSwipeList({ gap, padding, activeIndex, handleScroll, children })}
+        {renderSwipelistDots({ activeIndex, indexFraction, showDots, children })}
       </div>
     );
   },
 );
+
+const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (
+  <SwipeListControlList
+    gap={gap}
+    padding={padding}
+    activeIndex={activeIndex}
+    onScroll={handleScroll}
+  >
+    {children}
+  </SwipeListControlList>
+);
+
+const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (
+  <SwipeListControlDots activeIndex={activeIndex} indexFraction={indexFraction} showDots={showDots}>
+    {children}
+  </SwipeListControlDots>
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -16,4 +16,5 @@ export interface SwipeContainer {
 export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  onSlideChange?: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.9",
+  "version": "0.3.12",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -86,9 +86,7 @@
   .horizontal-list {
     display: flex;
     overflow-x: scroll;
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
-    touch-action: pan-x;
     scroll-snap-type: x mandatory;
   }
 
@@ -138,4 +136,16 @@
     box-shadow: none;
     border: 3px solid #42ab44;
   }
+
+  /* Hide arrows */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Hide arrows */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
 }

package/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            <div>{buttons}</div>
+            {buttons?.length ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/Blocks.ts

@@ -12,6 +12,7 @@ import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
 import { PictureText } from './PictureText/PictureText';
+import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
@@ -44,4 +45,5 @@ export const Blocks = {
   TextBlock,
   Tile,
   Navigation,
+  Placeholder,
 };

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

@@ -0,0 +1,152 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import { ComparisonTable } from './ComparisonTable';
+import type { Column } from './ComparisonTableContent';
+
+const image1: Picture = {
+  src: 'card-1.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image2: Picture = {
+  src: 'card-2.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image3: Picture = {
+  src: 'card-3.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const rowHeaders = [
+  { title: 'Начисление процентов на остаток по счету' },
+  { title: 'Начисление процентов на остаток по счету' },
+  { title: 'Начисление процентов на остаток по счету' },
+];
+const columns: Column[] = [
+  {
+    header: {
+      title: 'Россельхоз-Росснефть',
+      subtitle: 'Менеджер свяжется с вами и согласует встречу',
+      image: image1,
+      link: {
+        text: 'Подробнее',
+        href: '#',
+      },
+    },
+    data: [
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+    ],
+  },
+  {
+    header: {
+      title: 'Россельхоз-Росснефть',
+      image: image2,
+      link: {
+        text: 'Подробнее',
+        href: '#',
+      },
+    },
+    data: [
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Начисление процентов на остаток по счету',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Начисление',
+        },
+      ],
+      [
+        {
+          description: 'Начисление процентов на остаток по счету',
+        },
+      ],
+    ],
+  },
+  {
+    header: {
+      title: 'Профсоюзная',
+      image: image3,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [{ label: 'Бесплатно' }],
+      [{ label: 'Есть' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Для членов профсоюзных организаций' }],
+    ],
+  },
+];
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        isColoredFirstColumn={true}
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+        visibleRowLength={2}
+      />
+    </div>
+  ),
+  'with swiper': (
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        isColoredFirstColumn={true}
+        context={context}
+        rowHeaders={rowHeaders}
+        useSwiper={true}
+        columns={Array(2).fill(columns).flat()}
+        visibleRowLength={2}
+      />
+    </div>
+  ),
+};

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -0,0 +1,121 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { ComparisonTableContent } from './ComparisonTableContent';
+import { TableColumn } from './TableColumn';
+
+export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
+
+export const ComparisonTable = JSX<ComparisonTableProps>(
+  ({
+    className,
+    context,
+    title,
+    rowHeaders,
+    columns,
+    visibleRowLength = 0,
+    isColoredFirstColumn = false,
+    useSwiper = false,
+  }) => {
+    const tableData =
+      columns?.map(({ data, header }) => ({
+        header,
+        column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
+      })) || [];
+
+    const [columnsViewState, setColumnsViewState] = context.useState<boolean[]>(
+      new Array(columns?.length).fill(!visibleRowLength),
+    );
+
+    const handleToggleColumn = (i: number) => {
+      columnsViewState[i] = !columnsViewState[i];
+      setColumnsViewState([...columnsViewState]);
+    };
+
+    return (
+      <section
+        className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
+          className || ''
+        }`}
+      >
+        {title && (
+          <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+        )}
+
+        {renderColumns({
+          tableData,
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+          useSwiper,
+          setColumnsViewState,
+        })}
+      </section>
+    );
+  },
+);
+
+const renderColumns = ({
+  context,
+  tableData,
+  visibleRowLength,
+  isColoredFirstColumn,
+  columnsViewState,
+  handleToggleColumn,
+  useSwiper,
+  setColumnsViewState,
+}) => (
+  <div role="table">
+    {tableData?.length ? (
+      useSwiper ? (
+        <SwipeListControl
+          context={context}
+          onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
+        >
+          {tableData.map(
+            renderColumn({
+              context,
+              visibleRowLength,
+              isColoredFirstColumn,
+              columnsViewState,
+              handleToggleColumn,
+            }),
+          )}
+        </SwipeListControl>
+      ) : (
+        tableData.map(
+          renderColumn({
+            context,
+            visibleRowLength,
+            isColoredFirstColumn,
+            columnsViewState,
+            handleToggleColumn,
+          }),
+        )
+      )
+    ) : null}
+  </div>
+);
+
+const renderColumn =
+  ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
+  (columnData, i) =>
+    (
+      <TableColumn
+        key={String(i)}
+        context={context}
+        visibleRowLength={visibleRowLength}
+        showRow={columnsViewState[i]}
+        header={columnData.header}
+        columnData={columnData.column}
+        isFillGradient={i === 0 && isColoredFirstColumn}
+        onToggleColumn={() => handleToggleColumn(i)}
+      />
+    );
+
+const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
+  setColumnsViewState(new Array(columnsViewState.length).fill(false));
+};

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -26,6 +26,8 @@ export interface CellData {
 export interface ColumnHeader {
   /** @title Заголовок */
   title?: string;
+  /** @title Подзаголовок */
+  subtitle?: string;
   icon?: IconName;
   image?: Picture;
   link?: LinkProps;
@@ -61,4 +63,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
+  /** @title Использовать свайпер- */
+  useSwiper?: boolean;
 }

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+
+export interface HeaderCellProps {
+  icon?: IconName;
+  image?: Picture;
+  title?: string;
+  subtitle?: string;
+  isFillGradient?: boolean;
+  link?: LinkProps;
+}
+
+export const HeaderCell = JSX<HeaderCellProps>(
+  ({ icon, image, title, subtitle, isFillGradient }) => (
+    <div role="columnheader" scope="col">
+      {icon && (
+        <Icon
+          className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+          name={icon}
+          width="63"
+          height="63"
+        />
+      )}
+      {image?.src && (
+        <div className="mb-3.5">
+          <Img image={image} />
+        </div>
+      )}
+      {title && (
+        <Heading
+          headingType="h4"
+          className={`${isFillGradient ? 'text-white' : ''}`}
+          title={title}
+        />
+      )}
+      {subtitle && (
+        <div
+          className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
+        >
+          {subtitle}
+        </div>
+      )}
+    </div>
+  ),
+);

package/src/components/ComparisonTable/TableCell.mobile.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { CellData } from './ComparisonTableContent';
+import { DIVIDER_CLASSES } from './constants';
+
+export interface TableCellProps {
+  cell: CellData[];
+  rowHeader?: string;
+  isLastRow?: boolean;
+  isFirstRow?: boolean;
+  isFillGradient?: boolean;
+}
+
+export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => {
+  const cellWrapperClasses = `box-border flex flex-col`;
+
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
+
+  return (
+    <div className={cellWrapperClasses} role="cell">
+      <div className={cellClasses}>{cell.map(renderCellInner(isFillGradient, rowHeader))}</div>
+    </div>
+  );
+});
+
+const renderCellInner =
+  (isFillGradient: boolean, rowHeader?: string) =>
+  ({ label, description }: CellData, i: number) =>
+    (
+      <div key={String(i)} className="flex justify-between text-m-sm py-3.5">
+        <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
+          {rowHeader}
+        </div>
+        <div className="basis-1/2">
+          {label && (
+            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
+          )}
+          {description && (
+            <div
+              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+      </div>
+    );

package/src/components/ComparisonTable/TableCell.tsx

@@ -4,8 +4,9 @@ import { BORDER_CLASSES, DIVIDER_CLASSES, GRADIENT } from './constants';
 
 export interface TableCellProps {
   cell: CellData[];
-  isLastRow: boolean;
-  isFirstRow: boolean;
+  isLastRow?: boolean;
+  isFirstRow?: boolean;
+  rowHeader?: string;
   isFillGradient: boolean;
 }
 

package/src/components/ComparisonTable/TableColumn.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { GRADIENT } from './constants';
+import { HeaderCell } from './HeaderCell';
+import { TableCell } from './TableCell';
+
+export interface TableColumnProps extends UniBlockProps {
+  header: any;
+  columnData: any;
+  visibleRowLength: number;
+  isFillGradient: boolean;
+  showRow: boolean;
+  onToggleColumn: () => void;
+}
+
+export const TableColumn = JSX<TableColumnProps>(
+  ({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
+    const columnDataView = columnData.slice(0, showRow ? columnData.length : visibleRowLength);
+    const gradientClassName = isFillGradient ? GRADIENT : '';
+    const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
+    return (
+      <div className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}>
+        <HeaderCell {...header} isFillGradient={isFillGradient} />
+        {columnDataView?.length
+          ? columnDataView.map(({ rowHeader, cell }, i) => (
+              <TableCell
+                key={String(i)}
+                cell={cell}
+                rowHeader={rowHeader}
+                isFillGradient={isFillGradient}
+              />
+            ))
+          : null}
+
+        {showRow && renderButton({ header, buttonVersion })}
+        {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
+      </div>
+    );
+  },
+);
+
+const renderButton = ({ header, buttonVersion }) => (
+  <Button
+    href={header.link.href}
+    target={header.link.target}
+    version={buttonVersion}
+    className="font-medium text-m-sm mt-4 py-[11px]"
+  >
+    {header.link.text}
+  </Button>
+);
+
+const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
+  <div className="mt-5">
+    <a
+      onClick={onToggleColumn}
+      className={`font-medium text-m-sm cursor-pointer ${
+        isFillGradient ? 'text-white/80' : 'text-primary-main'
+      }`}
+    >
+      {!showRow ? 'Показать описание' : 'Скрыть'}
+    </a>
+  </div>
+);

package/src/components/ContentPage/ContentPageContext.tsx

@@ -21,7 +21,7 @@ export interface Search {
 
 export type AsyncDataHook = <Data, Error = any>(
   key: string,
-  fetcher: () => Promise<Data>,
+  fetcher: (key: string) => Promise<Data>,
 ) => { data?: Data; error?: Error };
 
 export type GeolocationHook = (defaultLocation: string) => [string, () => void];