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

package/src/components/Gallery/GalleryContent.ts

@@ -1,74 +0,0 @@
-import type { AlignType } from '../../model/AlignType';
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { HeadlineProps, HeadlineSmallProps } from '../../model/HeadlineType';
-import type { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-
-/**
- * @title Элемент списка
- */
-export interface GalleryItemProps {
-  /** @title Заголовок (моб.) */
-  title?: string; //TODO: for mobile
-  /** @title Текст */
-  text?: string;
-}
-
-/**
- * @title Карточка
- * @default {"headlineSmallVersion": "XL_L"}
- */
-export type GalleryCardProps = HeadlineSmallProps & {
-  /** @title Дополнительное описание */
-  additionalDescription?: string;
-  /**
-   * @default {
-   *   "format": "webp",
-   *   "size": {
-   *       "width": 140
-   *   },
-   *   "sources": [{
-   *       "media": 1279,
-   *       "width": 84,
-   *       "format": "webp",
-   *       "alignment": "center"
-   *   }]
-   * }
-   */
-  icon?: Picture;
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-  /**
-   * @title Буллиты
-   * @default true
-   */
-  isDotted?: boolean;
-  /** @title Список */
-  items?: GalleryItemProps[];
-  version?: BlockVersion;
-  /**
-   * @title Выравнивание
-   * @default center
-   */
-  align?: AlignType;
-  /**
-   * @title Кнопка по всей ширине
-   * @default true
-   */
-  isFullWidth?: boolean;
-};
-
-/**
- * @title Галерея
- */
-export type GalleryContent = HeadlineProps & {
-  /**
-   * @title Карточки
-   * @minItems 3
-   */
-  cards?: GalleryCardProps[];
-  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-  orientation?: ListOrientation; //TODO: for mobile
-  button?: ButtonWithIconProps;
-};

package/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/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/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/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/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -1,154 +0,0 @@
-import type { Picture } from '../../model/Picture';
-import '../../setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { GalleryCardProps } from '../Gallery/GalleryContent';
-import type { MiniGalleryProps } from './MiniGallery';
-import { MiniGallery } from './MiniGallery';
-
-const image: Picture = {
-  src: 'domovoj-kupon.png',
-  format: 'webp',
-  size: {
-    width: 120,
-    height: 70,
-  },
-  title: 'domovoj-kupon',
-};
-
-export const defaultProps: MiniGalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  cards: [
-    {
-      title: 'Более 5000 товаров',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      icon: image,
-    },
-    {
-      title: 'Более 1000 развлечений',
-      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      icon: image,
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      icon: image,
-    },
-    {
-      title: '«Моя выгода»',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      icon: image,
-    },
-    {
-      title: 'Более 8888 развлечений',
-      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      icon: image,
-    },
-  ],
-};
-
-const onlyTitleProps: MiniGalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  cards: [
-    {
-      title: 'Более 5000 товаров',
-      icon: image,
-    },
-    {
-      title: 'Более 1000 развлечений',
-      icon: image,
-    },
-    {
-      title: 'Фермерские продукты',
-      icon: image,
-    },
-    {
-      title: '«Моя выгода»',
-      icon: image,
-    },
-  ],
-};
-
-const additionalDescriptionCards: GalleryCardProps[] = [
-  {
-    title: 'Более 5000 товаров',
-    description: 'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-    additionalDescription: '01 января 2022',
-    icon: image,
-  },
-  {
-    title: 'Более 1000 развлечений',
-    description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-    additionalDescription: '02 февраля 2022',
-    icon: image,
-  },
-  {
-    title: 'Фермерские продукты',
-    description: 'Высокий процент даже при небольшой сумме денежных средств',
-    additionalDescription: '03 марта 2022',
-    icon: image,
-  },
-  {
-    title: '«Моя выгода»',
-    description: 'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-    additionalDescription: '04 апреля 2022',
-    icon: image,
-  },
-  {
-    title: 'Более 8888 развлечений',
-    description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-    additionalDescription: '05 мая 2022',
-    icon: image,
-  },
-];
-
-const additionalDescriptionProps: MiniGalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  cards: additionalDescriptionCards,
-};
-
-const button: ButtonWithIconProps = {
-  href: '/credit-cards',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'secondary',
-};
-
-const list = [{ text: 'Item 1' }, { text: 'Item 2' }, { text: 'Item 3' }];
-
-const combinedProps: MiniGalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  cards: additionalDescriptionCards.map((card, i) => ({
-    ...card,
-    button: button,
-    items: i % 2 ? list : undefined,
-  })),
-};
-
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <MiniGallery className="col-span-12" {...defaultProps} />
-    </div>
-  ),
-  'only title': (
-    <div className="container grid grid-cols-12">
-      <MiniGallery className="col-span-12" {...onlyTitleProps} />
-    </div>
-  ),
-  'additional description': (
-    <div className="container grid grid-cols-12">
-      <MiniGallery className="col-span-12" {...additionalDescriptionProps} />
-    </div>
-  ),
-  'button, list, additional description': (
-    <div className="container grid grid-cols-12">
-      <MiniGallery className="col-span-12" {...combinedProps} />
-    </div>
-  ),
-};

package/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/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/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/src/model/GalleryVersion.ts

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