@redneckz/wildless-cms-uni-blocks 0.8.15 → 0.8.16

package/mobile/src/components/Gallery/GalleryInner.tsx

@@ -1,50 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import type { GalleryVersion } from '../../model/GalleryVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { galleryLengthForScrollMap } from './constants';
-import { GalleryContainer } from './GalleryContainer';
-import type { GalleryContent } from './GalleryContent';
-
-export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
-  galleryVersion?: GalleryVersion;
-}
-
-export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ cards = [], className = '', galleryVersion = 'normal', button, ...rest }) => {
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: cards?.length,
-      visibleItemCount: galleryLengthForScrollMap[galleryVersion],
-    });
-    const { isScrollAvailable } = controls;
-
-    return (
-      <BlockWrapper
-        className={`relative p-[42px] overflow-hidden flex flex-col ${className}`}
-        {...rest}
-      >
-        <GalleryContainer
-          cards={cards}
-          galleryVersion={galleryVersion}
-          activeIndex={activeIndex}
-          {...rest}
-        />
-        {renderArrows({
-          ...controls,
-          btnClass: ['left-8', 'right-8'],
-          className: 'top-1/2',
-        })}
-        {isScrollAvailable ? (
-          <div>
-            <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
-            <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
-          </div>
-        ) : null}
-        {renderButtonsSection([button], { className: 'mt-8 mx-auto' })}
-      </BlockWrapper>
-    );
-  },
-);

package/mobile/src/components/Gallery/GalleryProps.ts

@@ -1,4 +0,0 @@
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { GalleryContent } from './GalleryContent';
-
-export interface GalleryProps extends GalleryContent, UniBlockProps {}

package/mobile/src/components/Gallery/constants.ts

@@ -1,16 +0,0 @@
-import type { GalleryVersion } from '../../model/GalleryVersion';
-
-export const galleryLengthForScrollMap: Record<GalleryVersion, number> = {
-  normal: 3,
-  mini: 4,
-};
-
-export const cardStyleMap: Record<GalleryVersion, string> = {
-  normal: 'min-w-[364px] w-[364px]',
-  mini: 'min-w-[260px] w-[260px]',
-};
-
-export const cardWidthMap: Record<GalleryVersion, number> = {
-  normal: 380,
-  mini: 276,
-};

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

@@ -1,56 +0,0 @@
-{
-  "content": {
-    "title": "Мини-галерея",
-    "description": "Описание",
-    "cards": [
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 120,
-            "height": 70
-          }
-        },
-        "title": "Заголовок 1",
-        "description": "Описание 1",
-        "version": "primary"
-      },
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 120,
-            "height": 70
-          }
-        },
-        "title": "Заголовок 2",
-        "description": "Описание 2",
-        "version": "primary"
-      },
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 120,
-            "height": 70
-          }
-        },
-        "title": "Заголовок 3",
-        "description": "Описание 3",
-        "version": "primary"
-      },
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 120,
-            "height": 70
-          }
-        },
-        "title": "Заголовок 4",
-        "description": "Описание 4",
-        "version": "primary"
-      }
-    ]
-  }
-}

package/mobile/src/components/MiniGallery/MiniGallery.tsx

@@ -1,10 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { GalleryInner } from '../Gallery/GalleryInner';
-import type { MiniGalleryContent } from './MiniGalleryContent';
-
-export interface MiniGalleryProps extends MiniGalleryContent, UniBlockProps {}
-
-export const MiniGallery = JSX<MiniGalleryProps>((props) => (
-  <GalleryInner {...props} galleryVersion="mini" />
-));

package/mobile/src/components/MiniGallery/MiniGallery.ui.json

@@ -1,19 +0,0 @@
-{
-  "content": {
-    "cards": {
-      "items": {
-        "icon": {
-          "ui:field": "picture"
-        },
-        "button": {
-          "icon": {
-            "ui:field": "icon"
-          }, 
-          "iconRight": {
-            "ui:field": "icon"
-          }
-        }
-      }
-    }
-  }
-}

package/mobile/src/components/MiniGallery/MiniGalleryContent.ts

@@ -1,13 +0,0 @@
-import type { GalleryCardProps, GalleryContent } from '../Gallery/GalleryContent';
-
-/**
- * @title Мини-галерея
- * @default {"headlineVersion": "L"}
- */
-export interface MiniGalleryContent extends GalleryContent {
-  /**
-   * @title Карточки
-   * @minItems 4
-   */
-  cards?: GalleryCardProps[];
-}

package/mobile/src/model/GalleryVersion.ts

@@ -1 +0,0 @@
-export type GalleryVersion = 'normal' | 'mini';

package/src/components/Catalog/Catalog.example.json

@@ -1,59 +0,0 @@
-{
-  "content": {
-    "title": "Каталог",
-    "description": "Описание",
-    "cards": [
-      {
-        "title": "Заголовок карточки 1",
-        "description": "Описание карточки",
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 230,
-            "height": 230
-          }
-        },
-        "button": {
-          "href": "#Accordion-0",
-          "text": "Подробнее",
-          "target": "_self",
-          "version": "primary"
-        }
-      },
-      {
-        "title": "Заголовок карточки 2",
-        "description": "Описание карточки",
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 230,
-            "height": 230
-          }
-        },
-        "button": {
-          "href": "",
-          "text": "Подробнее",
-          "target": "_self",
-          "version": "primary"
-        }
-      },
-      {
-        "title": "Заголовок карточки 3",
-        "description": "Описание карточки",
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 230,
-            "height": 230
-          }
-        },
-        "button": {
-          "href": "",
-          "text": "Подробнее",
-          "target": "_self",
-          "version": "primary"
-        }
-      }
-    ]
-  }
-}

package/src/components/Catalog/Catalog.fixture.tsx

@@ -1,50 +0,0 @@
-import type { Picture } from '../../model/Picture';
-import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import '../../setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Catalog, CatalogProps } from './Catalog';
-
-const payRing: Picture = {
-  src: 'pay-ring.png',
-  format: 'webp',
-  size: {
-    width: 230,
-    height: 230,
-  },
-  title: 'pay-ring',
-};
-
-const colors: ProductColorVersion[] = ['black', 'white'];
-
-const buttonPrimary: ButtonWithIconProps = {
-  href: '/credit-cards',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'primary',
-  icon: {
-    icon: 'AppleIcon',
-  },
-};
-
-const catalogCard = {
-  title: 'SATURN S-VI',
-  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
-  image: payRing,
-  price: 5600,
-  colors: colors,
-  button: buttonPrimary,
-};
-
-export const defaultProps: CatalogProps = {
-  title: 'Каталог',
-  description: 'Описание',
-  cards: new Array(5).fill(catalogCard).flat(),
-};
-
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <Catalog {...defaultProps} className="col-span-12" />
-    </div>
-  ),
-};

package/src/components/Catalog/Catalog.tsx

@@ -1,49 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { Headline } from '../Headline/Headline';
-import { CatalogCard } from './CatalogCard';
-import type { CatalogContent } from './CatalogContent';
-
-export interface CatalogProps extends CatalogContent, UniBlockProps {}
-
-const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_VIEW_COUNT = 3;
-const CARD_SHIFT = 430;
-
-export const Catalog = JSX<CatalogProps>(
-  ({ cards = [], className = '', title, description, ...rest }) => {
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: cards?.length,
-      visibleItemCount: CARD_VIEW_COUNT,
-    });
-
-    return (
-      <BlockWrapper className={`p-12 overflow-hidden text-center ${className}`} {...rest}>
-        <Headline
-          className="!p-0"
-          title={title}
-          description={description}
-          headlineVersion="M"
-          {...rest}
-        />
-        <div
-          className="flex duration-1000 gap-3.5 mt-8"
-          style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
-          role="list"
-        >
-          {cards?.length ? cards.map((card, i) => <CatalogCard key={String(i)} {...card} />) : null}
-        </div>
-        {renderArrows({
-          ...controls,
-          btnClass: ['left-8', 'right-8'],
-          className: 'top-1/2 z-10 mt-6',
-        })}
-        <div className={`${BLUR_BLOCK_CLASSES} left-0 bg-opacity-from-white`} />
-        <div className={`${BLUR_BLOCK_CLASSES} right-0 bg-opacity-to-white`} />
-      </BlockWrapper>
-    );
-  },
-);

package/src/components/Catalog/Catalog.ui.json

@@ -1,11 +0,0 @@
-{
-  "content": {
-    "cards": {
-      "items": {
-        "price": {
-          "ui:field": "number"
-        }
-      }
-    }
-  }
-}

package/src/components/Catalog/CatalogCard.tsx

@@ -1,47 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import type { CatalogCardType } from './CatalogContent';
-
-export interface CatalogCardProps extends CatalogCardType {
-  className?: string;
-  version?: BlockVersion;
-}
-
-const cardStyleMap: Record<ProductColorVersion, string> = {
-  black: 'bg-black',
-  white: 'bg-white',
-};
-
-export const CatalogCard = JSX<CatalogCardProps>(
-  ({ className = '', title, description, image, price, button, colors }) => (
-    <section
-      className={`border border-solid box-border border-gray p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
-      role="listitem"
-    >
-      {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
-      {title ? (
-        <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
-      ) : null}
-      {description ? <div className="text-m-light text-left mb-4">{description}</div> : null}
-      {colors?.length ? (
-        <div className="flex mb-4 text-s-light text-secondary-text">
-          <div className="mr-1.5">Доступные цвета: </div>
-          {colors.map(renderColorOption)}
-        </div>
-      ) : null}
-      {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-      {renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })}
-    </section>
-  ),
-);
-
-const renderColorOption = (color: ProductColorVersion, i: number) => (
-  <span
-    key={String(i)}
-    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
-  />
-);

package/src/components/Catalog/CatalogContent.ts

@@ -1,29 +0,0 @@
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { BlockVersion } from '../../model/BlockVersion';
-
-export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
-  /** @title Цена в рублях */
-  price?: number;
-  /** @title Доступные цвета */
-  colors?: ProductColorVersion[];
-  /**
-   * @title Кнопка
-   * @default {
-   *  "icon": { "format": "webp", "size": { "width": 24, "height": 24 } },
-   *  "iconRight" : { "format": "webp", "size": { "width": 24, "height": 24 } }
-   * }
-   */
-  button?: ButtonWithIconProps;
-}
-
-/**
- * @title Каталог
- */
-export type CatalogContent = HeadlineCommonProps & {
-  /** @title Список карточек */
-  cards?: CatalogCardType[];
-  version?: BlockVersion;
-};

package/src/components/Gallery/Gallery.example.json

@@ -1,66 +0,0 @@
-{
-  "content": {
-    "title": "Галерея",
-    "description": "Описание",
-    "orientation": "horizontal",
-    "cards": [
-      {
-        "icon": {
-          "format": "webp",
-          "size": {
-            "width": 150,
-            "height": 150
-          }
-        },
-        "title": "Заголовок 1",
-        "description": "Описание 1",
-        "href": "/credit-cards",
-        "version": "primary",
-        "isDotted": true,
-        "items": [
-          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-        ]
-      },
-      {
-        "icon": {
-          "format": "webp",
-          "size": {
-            "width": 140,
-            "height": 140
-          }
-        },
-        "title": "Заголовок 2",
-        "description": "Описание 2",
-        "href": "/credit-cards",
-        "version": "primary",
-        "isDotted": true,
-        "items": [
-          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-        ]
-      },
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 140,
-            "height": 140
-          }
-        },
-        "title": "Заголовок 3",
-        "description": "Описание 3",
-        "href": "/credit-cards",
-        "version": "primary",
-        "isDotted": true,
-        "items": [
-          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-        ]
-      }
-    ]
-  }
-}

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

@@ -1,83 +0,0 @@
-import type { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
-import '../../setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Gallery } from './Gallery';
-import type { GalleryCardProps } from './GalleryContent';
-
-const isDotted = true;
-
-const image: Picture = {
-  src: 'money-1.png',
-  format: 'webp',
-  size: {
-    width: 150,
-    height: 150,
-  },
-  title: 'money',
-};
-
-const link: ButtonWithIconProps = {
-  href: '/credit-cards',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'link',
-};
-
-const defaultItems = [
-  { title: 'До 1 млн ₽', text: 'Кредитный лимит' },
-  { title: 'От 16,9%', text: 'Ставка по кредиту' },
-  { title: 'До 15% ', text: 'Кэшбэк от покупок' },
-];
-
-const cards: GalleryCardProps[] = [
-  {
-    icon: image,
-    title: 'Вклады в любой валюте',
-    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
-    button: link,
-  },
-  {
-    icon: image,
-    title: 'Вклады в любой валюте',
-    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
-    version: 'secondary',
-  },
-  {
-    icon: image,
-    title: 'Вклады в любой валюте',
-    isDotted,
-    items: defaultItems,
-  },
-  {
-    title: 'Вклады в любой валюте',
-    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
-  },
-];
-
-const defaultProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  orientation: 'vertical' as ListOrientation,
-  cards: cards,
-};
-
-const scrollProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  orientation: 'horizontal' as ListOrientation,
-  cards: cards,
-};
-
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...defaultProps} />
-    </div>
-  ),
-  scroll: (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...scrollProps} />
-    </div>
-  ),
-};