@redneckz/wildless-cms-uni-blocks 0.14.9 → 0.14.11

package/mobile/src/ui-kit/Pagination/PaginationContainer.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { Icon } from '../Icon/Icon';
+import { paginationBlockStyle } from './paginationBlockStyle';
+import { renderPages } from './renderPages';
+
+const ICON_SIZE = { width: '24', height: '24' };
+
+export interface PaginationContainerProps {
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  totalPages: number;
+}
+
+export const PaginationContainer = ({
+  currentPage,
+  onPageChange,
+  totalPages,
+}: PaginationContainerProps) => {
+  const pages = useMemo(
+    () =>
+      new Array(totalPages).fill({
+        currentPage,
+        onPageChange,
+        totalPages,
+      }),
+    [totalPages, currentPage],
+  );
+
+  const handlePrevPage = useCallback(() => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  }, [currentPage]);
+
+  const handleNextPage = useCallback(() => {
+    if (currentPage < totalPages - 1) {
+      onPageChange(currentPage + 1);
+    }
+  }, [currentPage, totalPages]);
+
+  const handleFirstPage = useCallback(() => onPageChange(1), []);
+  const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
+
+  return (
+    <div className="flex gap-m items-center">
+      <div onClick={handlePrevPage}>
+        <Icon
+          name="ArrowLeftIcon"
+          iconVersion="black"
+          imageClassName={getIconStyle(currentPage === 1)}
+          {...ICON_SIZE}
+        />
+      </div>
+      <div className="flex gap-xs">
+        {currentPage > 1 ? (
+          <div onClick={handleFirstPage} className={paginationBlockStyle} aria-label="Страница 1">
+            1
+          </div>
+        ) : null}
+        {currentPage > 4 ? <div className="py-m px-s">...</div> : null}
+        {pages.map(renderPages)}
+        {currentPage < totalPages - 3 ? <div className="py-m px-s">...</div> : null}
+        {currentPage < totalPages ? (
+          <div
+            onClick={handleLastPage}
+            className={paginationBlockStyle}
+            aria-label={`Страница ${totalPages}}`}
+          >
+            {totalPages}
+          </div>
+        ) : null}
+      </div>
+      <div onClick={handleNextPage}>
+        <Icon
+          className="rotate-180"
+          name="ArrowLeftIcon"
+          iconVersion="black"
+          imageClassName={getIconStyle(currentPage === totalPages)}
+          {...ICON_SIZE}
+        />
+      </div>
+    </div>
+  );
+};
+
+const getIconStyle = (condition: boolean) =>
+  condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';

package/mobile/src/ui-kit/Pagination/paginationBlockStyle.ts

@@ -0,0 +1,2 @@
+export const paginationBlockStyle =
+  'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';

package/mobile/src/ui-kit/Pagination/renderPages.tsx

@@ -1,7 +1,8 @@
-import { paginationBlockStyle, PaginationProps } from './Pagination';
+import { paginationBlockStyle } from './paginationBlockStyle';
+import type { PaginationContainerProps } from './PaginationContainer';
 import { shouldRenderPage } from './shouldRenderPage';
 
-export const renderPages = (pagesParams: PaginationProps, index: number) => {
+export const renderPages = (pagesParams: PaginationContainerProps, index: number) => {
   const { currentPage, onPageChange, totalPages } = pagesParams;
   const page = index + 1;
   if (page === currentPage) {

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

@@ -2,12 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { LabelProps } from '../../model/HeadlineType';
-import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
-import type { Option } from './Option';
+import { Text } from '../Text/Text';
 import { formatOption } from './formatOption';
+import type { Option } from './Option';
 import { useSelectPopup } from './useSelectPopup';
 
 export type SelectProps = LabelProps & {

package/mobile/src/utils/formatDate.ts

@@ -0,0 +1 @@
+export const formatDate = (date: string) => date.split('-').reverse().join('.');

package/package.json

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

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
@@ -54,7 +54,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
             <Img className="flex justify-center align-center mb-xl" image={image} />
           ) : null
         }
-        buttons={renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })}
+        buttons={renderButtonsSection([button], { buttonClassName: 'w-full self-end' })}
       >
         {colors?.length ? (
           <div className="flex text-secondary-text mb-m">

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -39,7 +39,7 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         title={
           title ? <Heading headingType="h4" as="h3" className="mb-m z-10" title={title} /> : null
         }
-        backImage={image?.src ? <Img image={image} /> : null}
+        rightImage={image?.src ? <Img image={image} /> : null}
       >
         <div className="flex justify-between mb-m">
           {description ? (

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -50,7 +50,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
                 />
               ) : null
             }
-            backImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
+            rightImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
             buttons={
               socialMedia.length ? <SocialMedia media={socialMedia} showButtonText={true} /> : null
             }

package/src/components/ContentPage/ContentPage.tsx

@@ -36,7 +36,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
 
     return (
       <div data-theme={colorPalette}>
-        <section className={style('relative', pageStyle, className)}>
+        <section className={style('@container relative', pageStyle, className)}>
           {slots?.header ? (
             <div className="relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]">
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}

package/src/components/Depository/Depository.fixture.tsx

@@ -1,10 +1,12 @@
 import '../../setup-fixture';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { Depository } from './Depository';
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <Depository className="col-span-12" />
+      <PopupManager />
     </div>
   ),
 };

package/src/components/Depository/Depository.tsx

@@ -15,11 +15,12 @@ interface DepositoryProps extends DepositoryContent, UniBlockProps {}
 export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
   ({ className, ...rest }) => {
     const [currentPage, setCurrentPage] = useState(0);
-    const [itemCount] = useState(DEFAULT_ITEMS_COUNT);
+    const [itemCount, setItemCount] = useState(DEFAULT_ITEMS_COUNT);
 
     const { totalPages = 0, items } = useDepository(itemCount, currentPage);
 
-    const handleChangePage = useCallback((page) => setCurrentPage(page - 1), []);
+    const handleChangePage = useCallback((page: number) => setCurrentPage(page - 1), []);
+    const handleItemCountChange = useCallback((count: number) => setItemCount(count), []);
 
     return (
       <BlockWrapper className={style(className, 'container p-4xl')} {...rest}>
@@ -35,6 +36,8 @@ export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
             currentPage={currentPage + 1}
             onPageChange={handleChangePage}
             totalPages={totalPages + 1}
+            itemCount={itemCount}
+            onItemCountChange={handleItemCountChange}
           />
         </div>
       </BlockWrapper>

package/src/components/Depository/DepositoryItem.tsx

@@ -1,15 +1,15 @@
 import { useLink } from '../../hooks/useLink';
-import { convertTimestampToDate } from '../../utils/convertTimestampToDate';
+import { formatDate } from '../../utils/formatDate';
 import { DepositoryDataItem } from './useDepository';
 
-export const DepositoryItem = ({ title, timestamp = 0, publicId }: DepositoryDataItem) => {
+export const DepositoryItem = ({ title, timestamp = '', publicId }: DepositoryDataItem) => {
   const link = useLink();
   const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
 
   return (
     <div className="grid grid-cols-12 py-lg border-gray border-opacity-50 border-b" key={publicId}>
       <div className="col-span-2 text-m">
-        <span>{convertTimestampToDate(timestamp)}</span>
+        <span>{formatDate(timestamp)}</span>
       </div>
       <div className="col-span-10 text-h6 hover:text-primary-active">
         <a href={href} download aria-label="Скачать">

package/src/components/Depository/useDepository.ts

@@ -3,7 +3,7 @@ import { fetchJSONUnsafe } from '../../utils/fetchJSON';
 
 export interface DepositoryDataItem {
   publicId?: number;
-  timestamp?: number;
+  timestamp?: string;
   title?: number;
 }
 

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

@@ -117,7 +117,7 @@ export default {
         {...props}
         image={imageCard}
         benefits={benefits}
-        imageOptions={{ isBackground: true }}
+        imageOptions={{ isImageSecondary: true }}
       />
     </div>
   ),

package/src/components/ProductTile/ProductTile.example.json

@@ -37,7 +37,7 @@
     "imageOptions": {
       "directionRight": true,
       "imageAlign": "end",
-      "isBackground": true
+      "isSecondary": true
     }
   }
 }

package/src/components/ProductTile/ProductTile.tsx

@@ -24,7 +24,7 @@ export const ProductTile = JSX<ProductTileProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         isTabularBenefits={isTabularBenefits}
-        imageOptions={{ isBackground: true, ...imageOptions }}
+        imageOptions={{ isImageSecondary: true, ...imageOptions }}
         {...rest}
       >
         {additionalDescription ? (

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

@@ -9,7 +9,6 @@ const image: Picture = {
   format: 'webp',
   size: {
     width: 445,
-    height: 202,
   },
 };
 
@@ -61,7 +60,7 @@ export const TILE_PREMIUM: TileContent = {
 const tags = ['Tag #1', 'Tag #2', 'Tag #3'];
 
 export default {
-  credit: (
+  default: (
     <div className="container grid grid-cols-12">
       <Tile className="col-span-8" {...TILE} />
     </div>

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import type { HeadlineVersion } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { VNode } from '../../model/VNode';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -9,9 +10,8 @@ import { Img } from '../Img/Img';
 import { List } from '../List/List';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
-import type { BaseProductTileContent } from './BaseProductTileContent';
-import type { HeadlineVersion } from '../../model/HeadlineType';
 import type { TextAlign } from '../Text/TextProps';
+import type { BaseProductTileContent } from './BaseProductTileContent';
 
 interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {}
 
@@ -36,10 +36,10 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     buttons,
     image,
     imageOptions: {
-      imageAlign = 'end',
+      imageAlign = 'center',
       directionRight = true,
-      isBackground,
       isImageAlwaysOnRight,
+      isImageSecondary = false,
     } = {},
     children,
   }) => {
@@ -55,7 +55,8 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         padding={padding}
         defaultPadding={defaultPadding}
         {...(isFullWidthTitle ? { insetTitle: headline } : { title: headline })}
-        {...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight))}
+        {...leftOrRightImage(img, directionRight)}
+        isImageSecondary={isImageSecondary}
         imageAlign={imageAlign}
         isImageAlwaysOnRight={isImageAlwaysOnRight}
         buttons={renderButtonsSection(buttons)}

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,12 +1,12 @@
 import type { Align } from '../../model/Align';
 import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineProps } from '../../model/HeadlineType';
+import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
+import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 import type { ImageContent } from '../Img/ImgProps';
 import type { ListContent } from '../List/ListContent';
 import type { RichTextProps } from '../RichText/RichTextProps';
 import type { TagsContent } from '../Tags/TagsContent';
-import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
-import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 
 /** @title Доп. настройки картинки */
 export interface TileImageOptions {
@@ -14,8 +14,8 @@ export interface TileImageOptions {
   directionRight?: boolean;
   /** @title Выравнивание изображения */
   imageAlign?: Align;
-  /** @title Фоновое изображение */
-  isBackground?: boolean;
+  /** @title Второстепенное изображение */
+  isImageSecondary?: boolean;
   /** @title Изображение всегда справа */
   isImageAlwaysOnRight?: boolean;
 }

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

@@ -10,9 +10,9 @@ interface BaseTileProps extends UniBlockProps {
   leftImage?: VNode;
   rightImage?: VNode;
   imageAlign?: Align;
-  backImage?: VNode;
   buttons?: VNode;
   isImageAlwaysOnRight?: boolean;
+  isImageSecondary?: boolean;
 }
 
 const imageAlignmentMap: Record<Align, string> = {
@@ -32,8 +32,8 @@ export const BaseTile = JSX<BaseTileProps>(
     leftImage,
     rightImage,
     imageAlign,
-    backImage,
     isImageAlwaysOnRight = false,
+    isImageSecondary,
     children,
   }) => (
     <div
@@ -46,35 +46,41 @@ export const BaseTile = JSX<BaseTileProps>(
       {title ? <div className="relative">{title}</div> : null}
       <div
         className={style(
-          'grow relative flex justify-around @lg:justify-between items-stretch gap-3xl',
-          isImageAlwaysOnRight ? 'flex-row' : 'flex-col-reverse @lg:flex-row',
+          'grow relative flex flex-col-reverse @xl:flex-row justify-around @xl:justify-between items-stretch gap-3xl',
         )}
       >
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
-            'flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]',
+            'grid gap-3xl',
+            rightImage ? '@xl:grid-cols-2' : '',
             leftImage ? '' : 'grow',
           )}
         >
-          {insetTitle}
-          <div className="grow">{children}</div>
-          {backImage ? (
-            <div className="justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4">
-              {backImage}
-            </div>
-          ) : null}
-          {buttons}
+          <div className="grow grid gap-3xl row-span-1">
+            {insetTitle}
+            {children}
+          </div>
+          {renderImageContainer(rightImage, {
+            className: style(
+              '@xl:justify-self-end row-start-1 @xl:row-end-3 @xl:col-start-2',
+              positionStyle(isImageAlwaysOnRight),
+              isImageSecondary ? 'hidden @xl:block' : '',
+            ),
+            imageAlign,
+          })}
+          <div className="self-end">{buttons}</div>
         </div>
-        {renderImageContainer(rightImage, {
-          className: isImageAlwaysOnRight ? '' : '@xl:order-1',
-          imageAlign,
-        })}
       </div>
     </div>
   ),
 );
 
+const positionStyle = (isImageAlwaysOnRight: boolean) =>
+  isImageAlwaysOnRight
+    ? 'ml-xl justify-self-end row-start-1 row-end-3 col-start-2 self-center'
+    : '';
+
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
@@ -82,7 +88,7 @@ const renderImageContainer = (
   image ? (
     <div
       className={style(
-        'md:flex-shrink-0 self-center',
+        'shrink-1/2 justify-self-center',
         imageAlign && imageAlignmentMap[imageAlign],
         className,
       )}

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

@@ -71,7 +71,7 @@ const getInlineStyle = (className?: string, height?: string) => {
     return {};
   }
 
-  return { height: isOnlyDigits(height) ? `${height}px` : height };
+  return { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
 };
 
 const getSvgSize = (width?: string) => (width ? '' : 'w-full h-full');

package/src/ui-kit/Pagination/PageSizeSelector.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Select } from '../Select/Select';
+
+const DEFAULT_OPTIONS = [{ key: '10' }, { key: '50' }, { key: '100' }];
+
+interface PageSizeSelectorProps {
+  itemCount: number;
+  onItemCountChange: (count: number) => void;
+}
+
+export const PageSizeSelector = ({ itemCount, onItemCountChange }: PageSizeSelectorProps) => {
+  const handleItemCountChange = useCallback(
+    ({ key }: { key: string }) => onItemCountChange(Number(key)),
+    [],
+  );
+
+  return (
+    <div className="flex items-center gap-s">
+      <span>Показать по</span>
+      <Select
+        onChange={handleItemCountChange}
+        value={{ key: String(itemCount) }}
+        options={DEFAULT_OPTIONS}
+      />
+    </div>
+  );
+};

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

@@ -1,87 +1,33 @@
-import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { Icon } from '../Icon/Icon';
-import { renderPages } from './renderPages';
-
-export const paginationBlockStyle =
-  'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
+import { PageSizeSelector } from './PageSizeSelector';
+import { PaginationContainer } from './PaginationContainer';
 
 export interface PaginationProps {
   currentPage: number;
   onPageChange: (page: number) => void;
   totalPages: number;
+  itemCount?: number;
+  onItemCountChange?: (count: number) => void;
 }
 
-const ICON_SIZE = { width: '24', height: '24' };
-
-export const Pagination = ({ currentPage, onPageChange, totalPages }: PaginationProps) => {
-  const handlePrevPage = useCallback(() => {
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
-    }
-  }, [currentPage]);
-
-  const handleNextPage = useCallback(() => {
-    if (currentPage < totalPages - 1) {
-      onPageChange(currentPage + 1);
-    }
-  }, [currentPage, totalPages]);
-
-  const handleFirstPage = useCallback(() => onPageChange(1), []);
-  const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
-
-  const pages = useMemo(
-    () =>
-      new Array(totalPages).fill({
-        currentPage,
-        onPageChange,
-        totalPages,
-      }),
-    [totalPages, currentPage],
-  );
-
-  return (
-    <div className="mt-3xl flex items-center select-none" role="navigation" aria-label="Пагинация">
-      <div className="flex gap-m items-center">
-        <div onClick={handlePrevPage}>
-          <Icon
-            name="ArrowLeftIcon"
-            iconVersion="black"
-            imageClassName={getIconStyle(currentPage === 1)}
-            {...ICON_SIZE}
-          />
-        </div>
-        <div className="flex gap-xs">
-          {currentPage > 1 ? (
-            <div onClick={handleFirstPage} className={paginationBlockStyle} aria-label="Страница 1">
-              1
-            </div>
-          ) : null}
-          {currentPage > 4 ? <div className="py-m px-s">...</div> : null}
-          {pages.map(renderPages)}
-          {currentPage < totalPages - 3 ? <div className="py-m px-s">...</div> : null}
-          {currentPage < totalPages ? (
-            <div
-              onClick={handleLastPage}
-              className={paginationBlockStyle}
-              aria-label={`Страница ${totalPages}}`}
-            >
-              {totalPages}
-            </div>
-          ) : null}
-        </div>
-        <div onClick={handleNextPage}>
-          <Icon
-            className="rotate-180"
-            name="ArrowLeftIcon"
-            iconVersion="black"
-            imageClassName={getIconStyle(currentPage === totalPages)}
-            {...ICON_SIZE}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const getIconStyle = (condition: boolean) =>
-  condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';
+export const Pagination = ({
+  currentPage,
+  onPageChange,
+  totalPages,
+  itemCount,
+  onItemCountChange,
+}: PaginationProps) => (
+  <div
+    className="mt-3xl flex justify-between items-center select-none"
+    role="navigation"
+    aria-label="Пагинация"
+  >
+    <PaginationContainer
+      currentPage={currentPage}
+      onPageChange={onPageChange}
+      totalPages={totalPages}
+    />
+    {itemCount && onItemCountChange ? (
+      <PageSizeSelector itemCount={itemCount} onItemCountChange={onItemCountChange} />
+    ) : null}
+  </div>
+);