@redneckz/wildless-cms-uni-blocks 0.6.36 → 0.6.37

package/mobile/lib/components/InvestmentGallery/InvestmentGalleryContent.d.ts

@@ -1,50 +0,0 @@
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
-/**
- * @title Количество колонок в списке
- * @enumNames [
- *   "1 колонка",
- *   "2 колонки",
- *  ]
- */
-export declare type CardColumnsMode = 'single' | 'double';
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
-    /** @title Доп. описание карточки  */
-    additionalDescription?: string;
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 290
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *       "width": 174,
-     *       "format": "webp",
-     *       "alignment": "southeast"
-     *   }]
-     * }
-     */
-    image?: Picture;
-    columnsMode?: CardColumnsMode;
-    /** @title Описание пункта */
-    cardList?: CardListItem[];
-}
-export interface CardListItem {
-    /** @title Параметр */
-    parameter?: string;
-    /** @title Описание */
-    parameterDesccription?: string;
-}
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryContent extends TitleProps {
-    /** @title Карточки */
-    cards?: InvestmentGalleryCardTypes[];
-    version?: BlockVersion;
-}

package/mobile/lib/components/InvestmentGallery/InvestmentGalleryContent.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=InvestmentGalleryContent.js.map

package/mobile/lib/components/InvestmentGallery/InvestmentGalleryContent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InvestmentGalleryContent.js","sourceRoot":"","sources":["../../../src/components/InvestmentGallery/InvestmentGalleryContent.ts"],"names":[],"mappings":""}

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

@@ -1,64 +0,0 @@
-{
-  "title": "Заголовок блока",
-  "cards": [
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
-      },
-      "title": "Заголовок карточки",
-      "description": "Описание",
-      "additionalDescription": "Дополнительное описание",
-      "cardList":[
-        {
-          "parametr": "Параметр",
-          "parametrDesccription": "Описание"
-        },
-        {
-          "parametr": "Параметр",
-          "parametrDesccription": "Описание"
-        },
-        {
-          "parametr": "Параметр",
-          "parametrDesccription": "Описание"
-        }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
-      },
-      "title": "Заголовок 2",
-      "description": "Описание 2",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
-      },
-      "title": "Заголовок 3",
-      "description": "Описание 3",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    }
-  ],
-  "version": "primary"
-}

package/mobile/src/components/InvestmentGallery/InvestmentGallery.tsx

@@ -1,66 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { InvestmentGalleryCard } from './InvestmentGalleryCard';
-import type {
-  InvestmentGalleryCardTypes,
-  InvestmentGalleryContent,
-} from './InvestmentGalleryContent';
-
-const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_FULL_VIEW_COUNT = 1;
-
-export interface InvestmentGalleryProps extends InvestmentGalleryContent, UniBlockProps {}
-
-export const InvestmentGallery = JSX<InvestmentGalleryProps>(
-  ({ cards = [], className = '', title, version = 'primary', ...rest }) => {
-    const cardWidth = 710;
-
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: cards.length,
-      visibleItemCount: CARD_FULL_VIEW_COUNT,
-    });
-
-    return (
-      <BlockWrapper
-        className={`relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`}
-        {...rest}
-      >
-        {title ? <Heading headingType="h3" className="mb-9" title={title} /> : null}
-        <div>
-          <div
-            className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeIndex * cardWidth}px)` }}
-            role="list"
-          >
-            {cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null}
-          </div>
-          {renderArrows({
-            ...controls,
-            btnClass: ['left-8', 'right-8'],
-            className: 'top-1/2 mt-3',
-          })}
-        </div>
-        <div
-          className={`${BLUR_BLOCK_CLASSES} left-0 ${
-            version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
-          }`}
-        />
-        <div
-          className={`${BLUR_BLOCK_CLASSES} right-0 ${
-            version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
-          }`}
-        />
-      </BlockWrapper>
-    );
-  },
-);
-
-const renderInvestmentGalleryCard =
-  (className: string, version?: BlockVersion) => (card: InvestmentGalleryCardTypes, i: number) =>
-    <InvestmentGalleryCard key={String(i)} className={className} version={version} {...card} />;

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

@@ -1,11 +0,0 @@
-{
-  "content": {
-    "recommendations": {
-      "items": {
-        "image": {
-          "ui:field": "picture"
-        }
-      }
-    }
-  }
-}

package/mobile/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -1,84 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { BaseTile } from '../BaseTile/BaseTile';
-import type {
-  CardColumnsMode,
-  CardListItem,
-  InvestmentGalleryCardTypes,
-} from './InvestmentGalleryContent';
-
-export interface RecommendationCardProps extends InvestmentGalleryCardTypes {
-  className?: string;
-  version?: BlockVersion;
-}
-const getItemListFontSize = (colValue?: string) => (colValue === 'single' ? 'text-h6' : 'text-l');
-
-const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
-  double: 'flex gap-y-2 gap-x-10 flex-wrap',
-  single: 'flex gap-y-2 flex-col',
-};
-
-export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
-  ({
-    className = '',
-    columnsMode = 'double',
-    description,
-    additionalDescription,
-    image,
-    cardList,
-    title,
-    version = 'primary',
-  }) => {
-    const tileTitle = title ? (
-      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
-    ) : null;
-    const tileImage = image?.src ? (
-      <Img className="absolute bottom-0 right-0 m-0" image={image} />
-    ) : null;
-
-    return (
-      <section
-        className={`relative overflow-hidden text-left border border-solid box-border
-          p-9 min-w-[697px] min-h-[319px]
-          ${BorderVersionStyleMap[version]}
-          ${className}`}
-        role="listitem"
-      >
-        <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
-          <div className="flex flex-col justify-between">
-            <div className="flex itens-center justify-between mb-4">
-              {description ? <span className="text-h6">{description}</span> : null}
-              {additionalDescription ? (
-                <span className="text-m-light text-secondary-text"> {additionalDescription} </span>
-              ) : null}
-            </div>
-            {cardList?.length ? (
-              <div className={`${cardColumnsModeStyleMap[columnsMode]}`} role="list">
-                {renderCardList(cardList, columnsMode)}
-              </div>
-            ) : null}
-          </div>
-        </BaseTile>
-      </section>
-    );
-  },
-);
-
-const renderCardList = (cardList: CardListItem[], columnsMode: string) =>
-  cardList.map((item, i) => (
-    <div
-      key={String(i)}
-      className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
-      role="listitem"
-    >
-      {item?.parameter ? (
-        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
-      ) : null}
-      {item?.parameterDesccription ? (
-        <span className="text-m-light text-secondary-text">{item.parameterDesccription}</span>
-      ) : null}
-    </div>
-  ));

package/src/components/InvestmentGallery/InvestmentGallery.example.json

@@ -1,64 +0,0 @@
-{
-  "title": "Заголовок блока",
-  "cards": [
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
-      },
-      "title": "Заголовок карточки",
-      "description": "Описание",
-      "additionalDescription": "Дополнительное описание",
-      "cardList":[
-        {
-          "parametr": "Параметр",
-          "parametrDesccription": "Описание"
-        },
-        {
-          "parametr": "Параметр",
-          "parametrDesccription": "Описание"
-        },
-        {
-          "parametr": "Параметр",
-          "parametrDesccription": "Описание"
-        }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
-      },
-      "title": "Заголовок 2",
-      "description": "Описание 2",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
-      },
-      "title": "Заголовок 3",
-      "description": "Описание 3",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    }
-  ],
-  "version": "primary"
-}

package/src/components/InvestmentGallery/InvestmentGallery.tsx

@@ -1,66 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { InvestmentGalleryCard } from './InvestmentGalleryCard';
-import type {
-  InvestmentGalleryCardTypes,
-  InvestmentGalleryContent,
-} from './InvestmentGalleryContent';
-
-const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_FULL_VIEW_COUNT = 1;
-
-export interface InvestmentGalleryProps extends InvestmentGalleryContent, UniBlockProps {}
-
-export const InvestmentGallery = JSX<InvestmentGalleryProps>(
-  ({ cards = [], className = '', title, version = 'primary', ...rest }) => {
-    const cardWidth = 710;
-
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: cards.length,
-      visibleItemCount: CARD_FULL_VIEW_COUNT,
-    });
-
-    return (
-      <BlockWrapper
-        className={`relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`}
-        {...rest}
-      >
-        {title ? <Heading headingType="h3" className="mb-9" title={title} /> : null}
-        <div>
-          <div
-            className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeIndex * cardWidth}px)` }}
-            role="list"
-          >
-            {cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null}
-          </div>
-          {renderArrows({
-            ...controls,
-            btnClass: ['left-8', 'right-8'],
-            className: 'top-1/2 mt-3',
-          })}
-        </div>
-        <div
-          className={`${BLUR_BLOCK_CLASSES} left-0 ${
-            version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
-          }`}
-        />
-        <div
-          className={`${BLUR_BLOCK_CLASSES} right-0 ${
-            version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
-          }`}
-        />
-      </BlockWrapper>
-    );
-  },
-);
-
-const renderInvestmentGalleryCard =
-  (className: string, version?: BlockVersion) => (card: InvestmentGalleryCardTypes, i: number) =>
-    <InvestmentGalleryCard key={String(i)} className={className} version={version} {...card} />;

package/src/components/InvestmentGallery/InvestmentGallery.ui.json

@@ -1,11 +0,0 @@
-{
-  "content": {
-    "recommendations": {
-      "items": {
-        "image": {
-          "ui:field": "picture"
-        }
-      }
-    }
-  }
-}

package/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -1,84 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { BaseTile } from '../BaseTile/BaseTile';
-import type {
-  CardColumnsMode,
-  CardListItem,
-  InvestmentGalleryCardTypes,
-} from './InvestmentGalleryContent';
-
-export interface RecommendationCardProps extends InvestmentGalleryCardTypes {
-  className?: string;
-  version?: BlockVersion;
-}
-const getItemListFontSize = (colValue?: string) => (colValue === 'single' ? 'text-h6' : 'text-l');
-
-const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
-  double: 'flex gap-y-2 gap-x-10 flex-wrap',
-  single: 'flex gap-y-2 flex-col',
-};
-
-export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
-  ({
-    className = '',
-    columnsMode = 'double',
-    description,
-    additionalDescription,
-    image,
-    cardList,
-    title,
-    version = 'primary',
-  }) => {
-    const tileTitle = title ? (
-      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
-    ) : null;
-    const tileImage = image?.src ? (
-      <Img className="absolute bottom-0 right-0 m-0" image={image} />
-    ) : null;
-
-    return (
-      <section
-        className={`relative overflow-hidden text-left border border-solid box-border
-          p-9 min-w-[697px] min-h-[319px]
-          ${BorderVersionStyleMap[version]}
-          ${className}`}
-        role="listitem"
-      >
-        <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
-          <div className="flex flex-col justify-between">
-            <div className="flex itens-center justify-between mb-4">
-              {description ? <span className="text-h6">{description}</span> : null}
-              {additionalDescription ? (
-                <span className="text-m-light text-secondary-text"> {additionalDescription} </span>
-              ) : null}
-            </div>
-            {cardList?.length ? (
-              <div className={`${cardColumnsModeStyleMap[columnsMode]}`} role="list">
-                {renderCardList(cardList, columnsMode)}
-              </div>
-            ) : null}
-          </div>
-        </BaseTile>
-      </section>
-    );
-  },
-);
-
-const renderCardList = (cardList: CardListItem[], columnsMode: string) =>
-  cardList.map((item, i) => (
-    <div
-      key={String(i)}
-      className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
-      role="listitem"
-    >
-      {item?.parameter ? (
-        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
-      ) : null}
-      {item?.parameterDesccription ? (
-        <span className="text-m-light text-secondary-text">{item.parameterDesccription}</span>
-      ) : null}
-    </div>
-  ));