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

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -1,49 +0,0 @@
-/*
- Calculates array of breakpoints for each scrollable element in container.
- Returns array of tuples consisting of [start, end] boundary scrollLeft values.
-*/
-export const getScrollPoints = ({
-  gap,
-  padding,
-  clientWidth,
-  scrollWidth,
-  childElementCount,
-  itemWidth,
-}: {
-  gap: number;
-  padding: number;
-  clientWidth: number;
-  scrollWidth: number;
-  childElementCount: number;
-  itemWidth: number;
-}): [number, number][] => {
-  const scrollableDistance = scrollWidth - clientWidth;
-
-  if (childElementCount === 2) {
-    return [
-      [0, scrollableDistance],
-      [scrollableDistance, scrollWidth],
-    ];
-  }
-
-  const scrollItemWidth = itemWidth + gap;
-  const edgeScrollDistance = clientWidth - gap - padding;
-
-  const lastScrollableIdx = childElementCount - 2;
-  const scrollPoints: [number, number][] = new Array(childElementCount)
-    .fill(0)
-    .map((_, idx) =>
-      idx === 0 || idx === lastScrollableIdx
-        ? [
-            idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
-            idx > 0 ? scrollableDistance : edgeScrollDistance,
-          ]
-        : [
-            (idx - 1) * scrollItemWidth + edgeScrollDistance,
-            idx * scrollItemWidth + edgeScrollDistance,
-          ],
-    );
-  scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
-
-  return scrollPoints;
-};

package/src/components/Carousel/CarouselContainer.tsx

@@ -1,34 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-
-interface CarouselContainerProps {
-  activeIndex: number;
-  itemCount: number;
-  visibleItemCount?: number;
-  containerRef?: { current: HTMLDivElement | null };
-}
-
-const childStyleMap = ['[&>*]:min-w-[100%]', '[&>*]:min-w-[50%]', '[&>*]:min-w-[33.33%]'];
-
-export const CarouselContainer = JSX<CarouselContainerProps>(
-  ({ activeIndex, itemCount, visibleItemCount, containerRef, children }) => {
-    const scrollWidth = containerRef?.current?.scrollWidth || 0;
-    const maxScrollLeft = scrollWidth - (containerRef?.current?.clientWidth || 0);
-
-    const translateX = visibleItemCount
-      ? `${-Math.round((100 * activeIndex) / visibleItemCount)}%`
-      : `${-Math.round(Math.min((scrollWidth * activeIndex) / (itemCount || 1), maxScrollLeft))}px`;
-
-    return (
-      <div
-        className={`flex gap-1 duration-1000 ${
-          visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
-        }`}
-        style={{ transform: `translateX(${translateX})` }}
-        role="list"
-        ref={containerRef}
-      >
-        {children}
-      </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>
-  ));

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

@@ -1,24 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-
-/**
- * @title Элемент списка
- */
-export interface SwipeListControlItemProps {
-  className?: string;
-  style?: Record<string, string>;
-  'aria-current'?: boolean;
-}
-
-export const SwipeListControlItem = JSX<SwipeListControlItemProps>(
-  ({ className = '', children, ...rest }) => {
-    return (
-      <div
-        className={`snap-center snap-always min-w-full box-border ${className}`}
-        role="listitem"
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);

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

@@ -1,50 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
-import { SwipeListControlItem } from './SwipeListControlItem';
-import { SwipeContainer } from './SwipeListControlProps';
-import { getContainerStyle } from './utils/getContainerStyle';
-
-/**
- * @title Список
- */
-export interface SwipeListControlListProps extends SwipeContainer {
-  className?: string;
-  activeIndex: number;
-  onScroll?: JSX.IntrinsicElements['div']['onScroll'];
-}
-
-export const SwipeListControlList = JSX<SwipeListControlListProps>(
-  ({
-    className = '',
-    activeIndex = -1,
-    gap = DEFAULT_GAP,
-    padding = DEFAULT_PADDING,
-    children,
-    onScroll,
-  }) => {
-    return children ? (
-      <div
-        className={`overflow-auto flex horizontal-list no-scrollbar ${className}`}
-        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
-        role="list"
-        onScroll={onScroll}
-      >
-        {children.length && children.map ? (
-          children.map((child, idx) => (
-            <SwipeListControlItem
-              key={String(idx)}
-              style={getContainerStyle(padding / 4)}
-              aria-current={Boolean(activeIndex === idx)}
-            >
-              {child}
-            </SwipeListControlItem>
-          ))
-        ) : (
-          <SwipeListControlItem style={getContainerStyle(padding / 4)} aria-current>
-            {children}
-          </SwipeListControlItem>
-        )}
-      </div>
-    ) : null;
-  },
-);

package/src/ui-kit/SwipeListControl/constants.ts

@@ -1,10 +0,0 @@
-// column-gap between children of SwipeListControl container
-export const DEFAULT_GAP = 14;
-/*
-  Horizontal padding used on a container above SwipeListControl.
-  Same value used on a SwipeListControlChildren container to compensate it
-  and get rid of a clipping effect caused by overflow: hidden.
- */
-export const DEFAULT_PADDING = 16;
-
-// Classes used to compensate outer container padding, so that child elements won't be clipped

package/src/ui-kit/SwipeListControl/utils/getContainerStyle.ts

@@ -1,9 +0,0 @@
-// styles used to compensate outer container padding to get rid of clipping effect
-export const getContainerStyle = (padding: number): Record<string, string> => {
-  return {
-    marginLeft: `${-padding}px`,
-    marginRight: `${-padding}px`,
-    paddingLeft: `${padding}px`,
-    paddingRight: `${padding}px`,
-  };
-};

package/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -1,25 +0,0 @@
-/*
-  Returns object containing whole index part, and it's decimal part for a given
-  scrollLeft value of a container and an array of tuple containing values of a
-  start and end boundaries of a scrollable child, right boundary non-inclusive.
-  Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
- */
-export const getIndexParts = (
-  scrollLeft: number,
-  scrollPoints: [number, number][],
-): {
-  index: number;
-  fraction: number;
-} => {
-  const index = scrollPoints.findIndex(
-    ([pointStart, pointEnd]) => pointStart <= scrollLeft && scrollLeft < pointEnd,
-  );
-  if (index < 0) {
-    return { index, fraction: 0 };
-  }
-
-  const [start, end] = scrollPoints[index];
-  const fraction = (scrollLeft - start) / (end - start);
-
-  return { index, fraction };
-};

package/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -1,49 +0,0 @@
-/*
- Calculates array of breakpoints for each scrollable element in container.
- Returns array of tuples consisting of [start, end] boundary scrollLeft values.
-*/
-export const getScrollPoints = ({
-  gap,
-  padding,
-  clientWidth,
-  scrollWidth,
-  childElementCount,
-  itemWidth,
-}: {
-  gap: number;
-  padding: number;
-  clientWidth: number;
-  scrollWidth: number;
-  childElementCount: number;
-  itemWidth: number;
-}): [number, number][] => {
-  const scrollableDistance = scrollWidth - clientWidth;
-
-  if (childElementCount === 2) {
-    return [
-      [0, scrollableDistance],
-      [scrollableDistance, scrollWidth],
-    ];
-  }
-
-  const scrollItemWidth = itemWidth + gap;
-  const edgeScrollDistance = clientWidth - gap - padding;
-
-  const lastScrollableIdx = childElementCount - 2;
-  const scrollPoints: [number, number][] = new Array(childElementCount)
-    .fill(0)
-    .map((_, idx) =>
-      idx === 0 || idx === lastScrollableIdx
-        ? [
-            idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
-            idx > 0 ? scrollableDistance : edgeScrollDistance,
-          ]
-        : [
-            (idx - 1) * scrollItemWidth + edgeScrollDistance,
-            idx * scrollItemWidth + edgeScrollDistance,
-          ],
-    );
-  scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
-
-  return scrollPoints;
-};