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

package/mobile/src/hooks/useTableArrowScrollControl.ts

@@ -0,0 +1,22 @@
+import type { TableArrowScrollControlProps } from '../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
+
+export const useTableArrowScrollControl = ({
+  columnsLength,
+  colsLengthForScroll,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  columnsLength: number;
+  colsLengthForScroll: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (_: number) => void;
+}): Required<TableArrowScrollControlProps> => {
+  const onNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const onPrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  const isScrollAvailable = columnsLength > colsLengthForScroll;
+  const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
+  const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
+
+  return { onNextClick, onPrevClick, isScrollAvailable, showNextButton, showPrevButton };
+};

package/mobile/src/model/BlockVersion.ts

@@ -1,5 +1,11 @@
 /**
- * @title Цвет плитки
+ * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная"]
  */
 export type BlockVersion = 'primary' | 'secondary';
+
+/**
+ * @title Цвет блока
+ * @enumNames ["Прозрачная", Основная", "Второстепенная"]
+ */
+export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';

package/mobile/src/model/ListOrientation.ts

@@ -0,0 +1,8 @@
+/**
+ * @title Направление списка
+ * @enumNames [
+ *    "Вертикально",
+ *    "Горизонтально",
+ *    ]
+ */
+export type ListOrientation = 'vertical' | 'horizontal';

package/mobile/src/model/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from './LinkProps';
+import { IconName } from '../icons/IconName';
 
 /**
  * @title Меню
@@ -9,7 +10,18 @@ export interface TopMenuItem extends LinkProps {
   items?: LinkProps[];
 }
 
+/**
+ * @title Ссылка дополнительного меню
+ * @required ["text", "href"]
+ */
+export interface DispositionItem extends LinkProps {
+  /** @hidden */
+  icon?: IconName;
+}
+
 export interface SitemapProps {
   /** @title Дополнительное меню */
   topItems?: TopMenuItem[];
+  /** @title Дополнительное меню */
+  dispositions?: DispositionItem[];
 }

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
+import { IconName } from '../../icons/IconName';
 
 /**
  * @title Ссылка
@@ -9,7 +10,18 @@ export interface TopMenuItem extends LinkProps {
   items?: LinkProps[];
 }
 
+/**
+ * @title Ссылка дополнительного меню
+ * @required ["text", "href"]
+ */
+export interface DispositionItem extends LinkProps {
+  /** @hidden */
+  icon?: IconName;
+}
+
 export interface SitemapProps {
-  /** @title Дополнительное меню */
+  /** @title Основное меню */
   topItems?: TopMenuItem[];
+  /** @title Дополнительное меню */
+  dispositions?: DispositionItem[];
 }

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -6,32 +6,36 @@ interface ButtonInnerProps extends ButtonWithIconProps {
   version?: ButtonVersion;
 }
 
-export const ButtonInner = JSX<ButtonInnerProps>(
-  ({ text, aboveText, appendLeft, rounded, version }) => {
-    const withoutText = !text && !aboveText && Boolean(appendLeft);
-
-    const buttonInnerClasses =
-      version !== 'link'
-        ? `flex items-center justify-center
-          ${withoutText ? 'h-12 w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`} ${
-            rounded ? 'rounded-full' : ''
-          }`
-        : null;
-
-    return renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text });
-  },
-);
-
-function renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text }) {
+export const ButtonInner = JSX<ButtonInnerProps>((props) => {
+  const { text, aboveText, appendLeft } = props;
   return (
-    <div className={buttonInnerClasses}>
+    <div className={getButtonStyle(props)}>
       {appendLeft ? appendLeft : null}
-      {withoutText ? null : (
+      {isWithText(props) ? (
         <div>
           <div className="text-m-2xs text-left">{aboveText}</div>
           <div className="text-m-button font-medium text-left">{text}</div>
         </div>
-      )}
+      ) : null}
     </div>
   );
-}
+});
+
+const getButtonStyle = (props: ButtonInnerProps) => {
+  const { version, aboveText, rounded } = props;
+
+  if (version === 'link') {
+    return '';
+  }
+
+  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`;
+
+  return [
+    'flex items-center justify-center',
+    isWithText(props) ? withTextStyle : 'h-12 w-12',
+    rounded ? 'rounded-full' : '',
+  ].join(' ');
+};
+
+const isWithText = ({ text, aboveText, appendLeft }: ButtonInnerProps) =>
+  Boolean(text || aboveText || !appendLeft);

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

@@ -8,5 +8,5 @@ export interface DescriptionProps extends DescriptionContent {
 export const Description = JSX<DescriptionProps>((props) => {
   const { className = '', description } = props;
 
-  return <div className={`font-normal text-m-md ${className}`}>{description}</div>;
+  return <div className={`font-normal text-base ${className}`}>{description}</div>;
 });

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

@@ -1,15 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource } from '../../model/Picture';
-import { ImageProps } from './ImgProps';
+import type { Picture, ImgSource } from '../../model/Picture';
 
-export const Img = JSX<ImageProps>(({ className = '', image }) => {
+export interface ImageProps {
+  className?: string;
+  imageClassName?: string;
+  image: Picture;
+}
+
+export const Img = JSX<ImageProps>(({ className = '', image, imageClassName }) => {
   if (!image) {
     return null;
   }
-  const style = {
-    width: image.size?.width ? `${image.size?.width}px` : '100%',
-    height: image.size?.height ? `${image.size?.height}px` : '100%',
-  };
 
   return (
     <picture className={className}>
@@ -18,18 +19,31 @@ export const Img = JSX<ImageProps>(({ className = '', image }) => {
             <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
           ))
         : null}
-      <img
-        src={image.src}
-        className={`m-auto ${image.className || ''}`}
-        alt={image.alt || image.title}
-        title={image.title}
-        style={style}
-        {...image.size}
-      />
+      {renderImg(image, imageClassName)}
     </picture>
   );
 });
 
+const renderImg = (image, imageClassName = '') => {
+  const style = {
+    width: image.size?.width ? `${image.size?.width}px` : '100%',
+    height: image.size?.height ? `${image.size?.height}px` : '100%',
+  };
+  const title = image.title || '';
+  const alt = image.alt || image.title;
+
+  return (
+    <img
+      src={image.src}
+      className={`m-auto ${imageClassName}`}
+      alt={alt}
+      title={title}
+      style={style}
+      {...image.size}
+    />
+  );
+};
+
 export function formatToMimeType(format: ImgSource['format']): string | undefined {
   return format ? `image/${String(format)}` : undefined;
 }

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

@@ -2,9 +2,9 @@ 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 { getIndexParts } from './utils/getIndexParts';
 import { getScrollPoints } from './utils/getScrollPoints';
+import type { SwipeListControlProps } from './SwipeListControlProps';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -19,6 +19,13 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     const [activeIndex, setActiveIndex] = context.useState<number>(0);
     const [indexFraction, setIndexFraction] = context.useState<number>(0);
 
+    const dotsProps = {
+      activeIndex,
+      indexFraction,
+      showDots,
+      children,
+    };
+
     const handleScroll = (e: UIEvent) => {
       const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } =
         e.currentTarget as HTMLElement;
@@ -45,26 +52,16 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
 
     return (
       <div className={className}>
-        {renderSwipeList({ gap, padding, activeIndex, handleScroll, children })}
-        {renderSwipelistDots({ activeIndex, indexFraction, showDots, children })}
+        <SwipeListControlList
+          gap={gap}
+          padding={padding}
+          activeIndex={activeIndex}
+          onScroll={handleScroll}
+        >
+          {children}
+        </SwipeListControlList>
+        <SwipeListControlDots {...dotsProps} />
       </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/SwipeListControlDots.tsx

@@ -14,11 +14,23 @@ export interface SwipeListControlDotsProps {
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
   ({ children, activeIndex, indexFraction, showDots }) => {
+    const handleClick = (idx: number) => (e: Event) => {
+      if (idx === activeIndex) {
+        return;
+      }
+
+      const contentContainer = (e.currentTarget as HTMLElement).parentElement
+        ?.previousElementSibling;
+
+      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+    };
+
     return showDots && children?.length ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
         {children?.map((_, idx) => (
           <div
             key={String(idx)}
+            onClick={handleClick(idx)}
             className={`${DOT_STYLES}`}
             style={getDotStyles(idx, activeIndex, indexFraction)}
             aria-hidden

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

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ArrowButton } from '../Button/ArrowButton';
+import type { TableArrowScrollControlProps } from './TableArrowScrollControlProps';
+
+export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
+  ({ isScrollAvailable, onNextClick, onPrevClick, showNextButton, showPrevButton }) => {
+    return isScrollAvailable ? (
+      <div>
+        <div className="absolute top-7 right-7 z-10">
+          <ArrowButton
+            onClick={onNextClick}
+            disabled={!showNextButton}
+            ariaLabel="Пролистать вправо"
+            data-block-control="scroll-right"
+          />
+          <ArrowButton
+            className="mt-4 rotate-180"
+            onClick={onPrevClick}
+            disabled={!showPrevButton}
+            ariaLabel="Пролистать влево"
+            data-block-control="scroll-left"
+          />
+        </div>
+      </div>
+    ) : null;
+  },
+);

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.ts

@@ -0,0 +1,7 @@
+export interface TableArrowScrollControlProps {
+  isScrollAvailable?: boolean;
+  onNextClick?: (ev?: MouseEvent) => void;
+  onPrevClick?: (ev?: MouseEvent) => void;
+  showNextButton?: boolean;
+  showPrevButton?: boolean;
+}

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

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { Tab, TabClickHandler, TabsProps } from './TabsProps';
+
+const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
+const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
+
+export const Tabs = JSX<TabsProps>(({ tabs, currentTabIndex, onTabClick }) => {
+  return (
+    <div className="flex items-end border-b border-main-stroke" role="tablist">
+      {tabs?.map(renderTab(currentTabIndex, onTabClick))}
+    </div>
+  );
+});
+
+const renderTab =
+  (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
+    const isActive = currentTabIndex === index;
+    return (
+      <div
+        key={String(index)}
+        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 ${
+          isActive ? ACTIVE_TAB_STYLE : TAB_STYLE
+        }`}
+        role="tab"
+        onClick={() => onTabClick(index)}
+        aria-selected={String(isActive)}
+      >
+        {tab?.icon ? renderIcon(tab, isActive) : null}
+        <div>
+          {tab?.title ? <h3 className="font-medium m-0 text-base">{tab?.title}</h3> : null}
+          {tab?.description ? (
+            <span className={`font-light text-xs ${isActive ? '' : 'text-secondary-text'}`}>
+              {tab?.description}
+            </span>
+          ) : null}
+        </div>
+      </div>
+    );
+  };
+
+const renderIcon = (tab: Tab, isActive: boolean) => (
+  <div className="h-full mt-1" style={isActive ? { filter: 'invert(1)' } : null}>
+    <Icon className="w-5 h-5 mr-3" name={tab?.icon || 'CardIcon'} asSVG={!isActive} />
+  </div>
+);

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -0,0 +1,20 @@
+import type { IconName } from '../../icons/IconName';
+
+/**
+ * @title Вкладка
+ */
+export interface Tab {
+  /** @title Имя вкладки */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  icon?: IconName;
+}
+
+export type TabClickHandler = (value: number) => void;
+
+export interface TabsProps {
+  tabs?: Tab[];
+  currentTabIndex: number;
+  onTabClick: TabClickHandler;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.12",
+  "version": "0.3.15",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -99,14 +99,24 @@
     "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
     "precosmos:export": "npm run build:icons",
     "cosmos:export": "rimraf ./build && cosmos-export && cosmos-export --config cosmos.config.mobile.json",
-    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0"
+    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0",
+    "e2e": "cypress open",
+    "e2e:run": "cypress run --browser chrome --env type=actual",
+    "e2e:test": "npm run clean:diff && npm run e2e:run",
+    "e2e:base": "npm run create:base && npm run clean:diff && npm run clean:actual",
+    "create:base": "cypress run --browser chrome --env type=base --config screenshotsFolder=cypress/snapshots/base",
+    "clean:diff": "rimraf  ./cypress/snapshots/diff || exit 0",
+    "clean:actual": "rimraf ./cypress/snapshots/actual || exit 0"
   },
   "peerDependencies": {
+    "cypress": "^10.4.0",
+    "cypress-visual-regression": "^1.7.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "@redneckz/uni-jsx": "^0.1.6",
+    "cypress-visual-regression": "^1.7.0",
     "glob": "^8.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",

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

@@ -58,8 +58,10 @@ const propsTextBlock: AccordionProps = {
   ],
 };
 
-export default (
-  <div className="container grid grid-cols-12">
-    <Accordion className="col-span-12" {...propsTextBlock} />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsTextBlock} />
+    </div>
+  ),
+};

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,23 +1,25 @@
 import { context } from '../../setup-fixture';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { TILE } from '../Tile/Tile.fixture';
-import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
-import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
+import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 import type {
+  GalleryAccordionBlockDef,
   HeadlineAccordionBlockDef,
   LinkDocsAccordionBlockDef,
+  MiniGalleryAccordionBlockDef,
   PictureTextAccordionBlockDef,
+  ProductBlockAccordionBlockDef,
+  ProductTileAccordionBlockDef,
   TextBlockAccordionBlockDef,
   TileAccordionBlockDef,
-  ProductTileAccordionBlockDef,
-  GalleryAccordionBlockDef,
-  MiniGalleryAccordionBlockDef,
 } from './AccordionContent';
 
 const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlockDef = {
@@ -35,6 +37,11 @@ const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlockDef = {
   ...PICTURE_TEXT,
 };
 
+const PRODUCT_BLOCK_ACCORDION_BLOCK: ProductBlockAccordionBlockDef = {
+  accordionBlockType: 'ProductBlock',
+  ...PRODUCT_BLOCK,
+};
+
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlockDef = {
   accordionBlockType: 'LinkDocs',
   ...linkDocsContentExample,
@@ -46,11 +53,21 @@ const TILES_ACCORDION_BLOCK: TileAccordionBlockDef = {
   ...TILE,
 };
 
+const TILES_PREMIUM_ACCORDION_BLOCK: TileAccordionBlockDef = {
+  accordionBlockType: 'Tile',
+  ...TILE_PREMIUM,
+};
+
 const PRODUCT_TILES_ACCORDION_BLOCK: ProductTileAccordionBlockDef = {
   accordionBlockType: 'ProductTile',
   ...PRODUCT_TILE,
 };
 
+const PRODUCT_PENSION_TILES__ACCORDION_BLOCK: ProductTileAccordionBlockDef = {
+  accordionBlockType: 'ProductTile',
+  ...PRODUCT_PENSION_TILE,
+};
+
 const GALLERY_ACCORDION_BLOCK: GalleryAccordionBlockDef = {
   accordionBlockType: 'Gallery',
   ...GALLERY,
@@ -61,8 +78,7 @@ const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryAccordionBlockDef = {
   ...MINI_GALLERY,
 };
 
-const propsTextBlock: AccordionProps = {
-  title: 'Accordion title',
+const propsBlock: AccordionProps = {
   context,
   accordionItems: [
     {
@@ -100,8 +116,58 @@ const propsTextBlock: AccordionProps = {
   ],
 };
 
-export default (
-  <div className="container grid grid-cols-12">
-    <Accordion className="col-span-12" {...propsTextBlock} />
-  </div>
-);
+const propsTwoColumns: AccordionProps = {
+  context,
+  accordionItems: [
+    {
+      label: 'Другие продукты Россельхозбанка 1',
+      blocks: [
+        TILES_PREMIUM_ACCORDION_BLOCK,
+        TILES_PREMIUM_ACCORDION_BLOCK,
+        TILES_ACCORDION_BLOCK,
+        TILES_ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие продукты Россельхозбанка 2',
+      blocks: [
+        PRODUCT_TILES_ACCORDION_BLOCK,
+        PRODUCT_TILES_ACCORDION_BLOCK,
+        PRODUCT_PENSION_TILES__ACCORDION_BLOCK,
+        PRODUCT_PENSION_TILES__ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие продукты Россельхозбанка 3',
+      blocks: [PRODUCT_BLOCK_ACCORDION_BLOCK, PRODUCT_BLOCK_ACCORDION_BLOCK],
+      columns: 2,
+    },
+
+    {
+      label: 'Другие продукты Россельхозбанка 4',
+      blocks: [
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsBlock} />
+    </div>
+  ),
+
+  'two columns': (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsTwoColumns} />
+    </div>
+  ),
+};

package/src/components/Accordion/AccordionBlocks.tsx

@@ -1,6 +1,7 @@
 import { Headline } from '../Headline/Headline';
 import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { PictureText } from '../PictureText/PictureText';
+import { ProductBlock } from '../ProductBlock/ProductBlock';
 import { TextBlock } from '../TextBlock/TextBlock';
 import { Tile } from '../Tile/Tile';
 import { ProductTile } from '../ProductTile/ProductTile';
@@ -13,6 +14,7 @@ export const AccordionBlocks = {
   LinkDocs,
   TextBlock,
   PictureText,
+  ProductBlock,
   Tile,
   ProductTile,
   Gallery,