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

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

@@ -1,78 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
-import type { Picture } from '../../model/Picture';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
-import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
-
-export const GalleryCardInner = JSX<GalleryCardProps>(
-  ({
-    title,
-    headlineSmallVersion = 'H6',
-    description,
-    additionalDescription,
-    icon,
-    items,
-    button,
-    isFullWidth = true,
-    isDotted = true,
-    align = 'center',
-    ...rest
-  }) => (
-    <BlockWrapper
-      className={`h-full flex flex-col justify-between ${AlignText[align]}`}
-      tag="div"
-      {...rest}
-    >
-      <div className="flex flex-col h-full">
-        {renderImage(icon)}
-        {renderCardTitle(headlineSmallVersion, title)}
-        {renderDescription(description, title)}
-        {items?.length ? renderItems(items, isDotted) : null}
-        {renderAdditionalDescription(additionalDescription)}
-      </div>
-      {renderButtonsSection([button], {
-        buttonClassName: `mt-6 ${isFullWidth ? 'w-full' : 'self-center'}`,
-      })}
-    </BlockWrapper>
-  ),
-);
-
-const renderImage = (image?: Picture) => (
-  <div className="flex justify-center">
-    {image?.src ? <Img className="mb-5" image={image} /> : null}
-    {image?.icon ? (
-      <Img
-        className={`w-8 h-8 min-w-8 mb-5 rounded-full`}
-        image={getIconWithVersion(image)}
-        asSVG
-      />
-    ) : null}
-  </div>
-);
-
-const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
-  title ? <div className={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</div> : null;
-
-const renderDescription = (description?: string, title?: string) =>
-  description ? <div className={`text-l ${title ? 'mt-2' : ''}`}>{description}</div> : null;
-
-const renderAdditionalDescription = (additionalDescription?: string) =>
-  additionalDescription ? (
-    <div className={`text-m-light mt-auto group-data-primary:text-secondary-text`}>
-      {additionalDescription}
-    </div>
-  ) : null;
-
-const renderItems = (items: GalleryItemProps[], isDotted: boolean) => (
-  <List
-    className="max-w-[308px] mt-2 text-s group-data-primary:text-secondary-text"
-    itemClassName="text-left"
-    items={items.filter((item) => item?.text).map((item) => item.text as string)}
-    isDotted={isDotted}
-  />
-);

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

@@ -1,61 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { GalleryVersion } from '../../model/GalleryVersion';
-import { blockStyles } from '../../ui-kit/BlockWrapper';
-import { Headline } from '../Headline/Headline';
-import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
-import { GalleryCardInner } from './GalleryCardInner';
-import type { GalleryCardProps } from './GalleryContent';
-import type { GalleryInnerProps } from './GalleryInner';
-
-export interface GalleryContainerProps extends GalleryInnerProps {
-  activeIndex: number;
-}
-
-export interface GalleryCardData {
-  card: GalleryCardProps;
-  galleryVersion: GalleryVersion;
-}
-
-export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({
-    headlineVersion = 'M',
-    cards = [],
-    galleryVersion = 'normal',
-    activeIndex,
-    title,
-    description,
-  }) => (
-    <div>
-      <Headline
-        className="!p-0"
-        title={title}
-        description={description}
-        headlineVersion={headlineVersion}
-      />
-      <div
-        className={`flex mt-8 ${
-          cards?.length <= galleryLengthForScrollMap[galleryVersion] ? 'justify-center' : ''
-        } duration-1000`}
-        style={{ transform: `translateX(-${activeIndex * cardWidthMap[galleryVersion]}px)` }}
-        role="list"
-      >
-        {cards?.map((card, i) => renderCard({ card, galleryVersion }, i))}
-      </div>
-    </div>
-  ),
-);
-
-function renderCard({ card, galleryVersion }: GalleryCardData, i: number) {
-  return (
-    <section
-      className={`box-border border-solid border border-gray p-6 mx-2 flex flex-col justify-between
-        items-stretch ${cardStyleMap[galleryVersion]} ${
-        blockStyles[card.version ?? 'primary'] // TODO Replace with direct BlockWrapper usage
-      } w-full col-span-4`}
-      key={String(i)}
-      role="listitem"
-    >
-      <GalleryCardInner {...card} />
-    </section>
-  );
-}

package/mobile/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/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;
-};