@redneckz/wildless-cms-uni-blocks 0.2.114 → 0.3.0

package/src/ui-kit/Icon/Icon.tsx

@@ -1,14 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { projectSettings } from '../../ProjectSettings';
-import type { IconProps } from './IconProps';
+import type { IconColor, IconProps } from './IconProps';
+
+const svgColorsMap: Record<IconColor, string> = {
+  none: '',
+  primary: 'text-primary-main',
+};
 
 export const Icon = JSX<IconProps>(
-  ({ className = '', name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
+  ({
+    className = '',
+    name,
+    alt = `Icon ${name}`,
+    title = alt,
+    asSVG,
+    color = 'primary',
+    ...imgProps
+  }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
     if (asSVG) {
       return (
-        <svg className={className} {...imgProps} aria-hidden="true">
+        <svg className={`${svgColorsMap[color]} ${className}`} {...imgProps} aria-hidden="true">
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
           <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />

package/src/ui-kit/Icon/IconProps.ts

@@ -1,154 +1,12 @@
-/**
- * Icons sorted by name
- */
-export enum IconMap {
-  'ActualBalanceIcon',
-  'AppleIcon',
-  'AtmIcon',
-  'BankIcon',
-  'BurgerIcon',
-  'BurgerIconWhite',
-  'Calendar2Icon',
-  'CalendarCircleIcon',
-  'CalendarIcon',
-  'CalendarTickIcon',
-  'CalendarWhiteIcon',
-  'CardIcon',
-  'CardPosIcon',
-  'CardTickIcon',
-  'CardWithGemIcon',
-  'ChartSquareIcon',
-  'ClockIcon',
-  'CloseIcon',
-  'ComfortableCompIcon',
-  'CreditCardsIcon',
-  'DocIcon',
-  'DocumentTextIcon',
-  'DollarIcon',
-  'EarthIcon',
-  'EmptyWalletChangeIcon',
-  'EmptyWalletIcon',
-  'EmptyWalletWhiteIcon',
-  'EuroIcon',
-  'GeolocationIcon',
-  'GlassIcon',
-  'GlobalIcon',
-  'GridIcon',
-  'GridIconWhite',
-  'InterestGrowthIcon',
-  'InterestIcon',
-  'JCBIcon',
-  'LoupeIcon',
-  'MasterCardIcon',
-  'MinusIcon',
-  'MirIcon',
-  'MoneyIcon',
-  'MoneyInsuranceIcon',
-  'MonitorMobileIcon',
-  'NewDocIcon',
-  'OfficeIcon',
-  'OkIcon',
-  'PassSendIcon',
-  'PercentageRoundIcon',
-  'PercentageSquareIcon',
-  'PercentageSquareWhiteIcon',
-  'PersonalCardIcon',
-  'PlayMarketIcon',
-  'PlusIcon',
-  'Profile2UserIcon',
-  'ProfileIcon',
-  'RoundRubleIcon',
-  'SafeIcon',
-  'ShieldTickIcon',
-  'SignDocsIcon',
-  'SmallClockIcon',
-  'TelegramIcon',
-  'UnionPayIcon',
-  'UserTickIcon',
-  'VisaIcon',
-  'VKIcon',
-  'WalletAddIcon',
-  'WalletAdd2Icon',
-  'WalletIcon',
-  'WalletWithMoneyIcon',
-}
+import type { IconName } from '../../icons/IconName';
+
+export type { IconName };
 
 /**
- * @title Иконка
- * @enumNames [
- *    "Деньги",
- *    "Лого «Apple»",
- *    "Банкомат",
- *    "Банк",
- *    "Бургер",
- *    "Бургер (белый)",
- *    "Календарь 2",
- *    "Скруглённый календарь",
- *    "Календарь",
- *    "Календарь с галочкой",
- *    "Календарь белый",
- *    "Кред. карта",
- *    "Кред. карта под наклоном",
- *    "Кред. карта с галочкой",
- *    "Карта с драгоценностями",
- *    "Деньги внутри кошелька",
- *    "Часы",
- *    "Крестик",
- *    "Кресло",
- *    "Скидка",
- *    "Кредитные карты",
- *    "Огромная скидка",
- *    "Документ",
- *    "Документ с текстом",
- *    "Доллар",
- *    "Пустой кошелёк с возвратом",
- *    "Пустой кошелёк",
- *    "Пустой кошелёк (белый)",
- *    "Евро",
- *    "Геолокация",
- *    "Зеркало",
- *    "Глобус",
- *    "Сетка",
- *    "Сетка (белая)",
- *    "Диаграмма роста",
- *    "Скидка",
- *    "JCB",
- *    "Лупа",
- *    "MasterCard",
- *    "Минус",
- *    "МИР",
- *    "Деньги",
- *    "Денежное страхование",
- *    "Монитор и мобильный",
- *    "Новый документ",
- *    "Офис",
- *    "Лого «Одноклассники»",
- *    "Бизнес",
- *    "Проценты (круг.)",
- *    "Проценты",
- *    "Проценты белые",
- *    "Персональная карта",
- *    "Лого «PlayMarket»",
- *    "Плюс",
- *    "Профиль, 2 персоны",
- *    "Профиль",
- *    "Рубль (круг.)",
- *    "Сейф",
- *    "Безопасность",
- *    "Подписанные документы",
- *    "Маленькие часы",
- *    "Лого «Telegram»",
- *    "UnionPay",
- *    "Пользователь",
- *    "Visa",
- *    "Лого «VK»",
- *    "Пополнение карты",
- *    "Кошелёк с плюсом",
- *    "Кошелёк",
- *    "Кошелёк с деньгами",
- *  ]
+ * @title Цвет иконки (svg)
+ * @enumNames ["Нет", "Основной"]
  */
-export type IconName = keyof typeof IconMap;
+export type IconColor = 'none' | 'primary';
 
 export interface IconProps {
   className?: string;
@@ -158,4 +16,5 @@ export interface IconProps {
   width?: string;
   height?: string;
   asSVG?: boolean;
+  color?: IconColor;
 }

package/src/ui-kit/{Img.mobile.tsx → Img/Img.mobile.tsx}

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource, Picture } from '../model/Picture';
+import type { ImgSource } from '../../model/Picture';
+import { ImageProps } from './ImgProps';
 
-export interface ImageProps {
-  className?: string;
-  image: Picture;
-}
-
-export const Img = JSX<ImageProps>(({ className = '', image: { size, ...image } }) => {
+export const Img = JSX<ImageProps>(({ className = '', image }) => {
+  if (!image) {
+    return null;
+  }
   const style = {
-    width: size?.width ? `${size?.width}px` : '100%',
-    height: size?.height ? `${size?.height}px` : '100%',
+    width: image.size?.width ? `${image.size?.width}px` : '100%',
+    height: image.size?.height ? `${image.size?.height}px` : '100%',
   };
 
   return (
@@ -25,7 +24,7 @@ export const Img = JSX<ImageProps>(({ className = '', image: { size, ...image }
         alt={image.alt || image.title}
         title={image.title}
         style={style}
-        {...size}
+        {...image.size}
       />
     </picture>
   );

package/src/ui-kit/{Img.tsx → Img/Img.tsx}

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource, Picture } from '../model/Picture';
+import type { ImgSource, Picture } from '../../model/Picture';
 
 export interface ImageProps {
   className?: string;

package/src/ui-kit/Img/ImgProps.ts

@@ -0,0 +1,9 @@
+import type { Picture } from '../../model/Picture';
+
+export interface ImageContent {
+  image?: Picture;
+}
+
+export interface ImageProps extends ImageContent {
+  className?: string;
+}

package/src/ui-kit/List/List.tsx

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ListItem } from './ListItem';
+import { ListProps } from './ListProps';
+
+export const List = JSX<ListProps>((props) => {
+  const { className = '', itemClassName, isDotted, items, version } = props;
+
+  return (
+    <section className={`${className}`} role="list">
+      {items?.length
+        ? items.map((_, i) => (
+            <ListItem
+              key={String(i)}
+              className={itemClassName}
+              isDotted={isDotted}
+              version={version}
+            >
+              {_}
+            </ListItem>
+          ))
+        : null}
+    </section>
+  );
+});

package/src/ui-kit/List/ListContent.ts

@@ -0,0 +1,4 @@
+export interface ListContent {
+  /** @title Список */
+  items?: string[];
+}

package/src/ui-kit/List/ListItem.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ListItemVersion } from './ListProps';
+
+/**
+ * @title Параметры элемента списка
+ */
+export interface ListItemProps {
+  className?: string;
+  version?: ListItemVersion;
+  text?: string;
+  isDotted?: boolean;
+}
+
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+
+const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+  gray: 'text-secondary-text',
+};
+
+const LIST_STYLE_MAP: Record<ListItemVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-white',
+  gray: 'bg-secondary-text',
+};
+
+export const ListItem = JSX<ListItemProps>(
+  ({ className = '', isDotted = true, children, version = 'primary' }) => {
+    return (
+      <div className={`font-sans flex items-center ${className}`} role="listitem">
+        {isDotted && <div className={getListStyle(version)} />}
+        <span className={TEXT_STYLE_MAP[version]}>{children}</span>
+      </div>
+    );
+  },
+);
+
+const getListStyle = (version: ListItemVersion) => {
+  const size =
+    version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
+  return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
+};

package/src/ui-kit/List/ListProps.ts

@@ -0,0 +1,16 @@
+import type { ListContent } from './ListContent';
+
+/**
+ * @title Версия списка
+ */
+export type ListItemVersion = 'primary' | 'secondary' | 'gray';
+
+/**
+ * @title Содержимое списка
+ */
+export interface ListProps extends ListContent {
+  className?: string;
+  isDotted?: boolean;
+  version?: ListItemVersion;
+  itemClassName?: string;
+}

package/src/ui-kit/Logo/Logo.mobile.tsx

@@ -33,6 +33,7 @@ export const Logo = JSX<Partial<LogoProps>>(
         className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
+        aria-label="Россельхозбанк"
       >
         <SVG
           className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}

package/src/ui-kit/Logo/Logo.tsx

@@ -33,6 +33,7 @@ export const Logo = JSX<Partial<LogoProps>>(
         className={`inline-flex items-center font-sans no-underline ${className || ''}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
+        aria-label="Россельхозбанк"
       >
         <SVG
           className={`${SVG_COLOR[bgColor]} w-10`}

package/src/ui-kit/SwipeListControl/SwipeListControl.fixture.mobile.tsx

@@ -0,0 +1,16 @@
+import { SwipeListControl } from './SwipeListControl';
+import { mobileContext } from '../../setup-fixture';
+
+const children = new Array(4).fill(0).map((_, i) => (
+  <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
+    {`Element #${i}`}
+  </div>
+));
+
+export default {
+  default: (
+    <div className="container px-4 py-5 grid-cols-12 bg-white">
+      <SwipeListControl context={mobileContext}>{children}</SwipeListControl>
+    </div>
+  ),
+};

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

@@ -0,0 +1,62 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { SwipeListControlProps } from './SwipeListControlProps';
+import { getScrollPoints } from './utils/getScrollPoints';
+import { getIndexParts } from './utils/getIndexParts';
+import { SwipeListControlList } from './SwipeListControlList';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+
+export const SwipeListControl = JSX<SwipeListControlProps>(
+  ({
+    className,
+    context,
+    children,
+    gap = DEFAULT_GAP,
+    padding = DEFAULT_PADDING,
+    showDots = true,
+  }) => {
+    const [activeIndex, setActiveIndex] = context.useState<number>(0);
+    const [indexFraction, setIndexFraction] = context.useState<number>(0);
+
+    const handleScroll = (e: UIEvent) => {
+      const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } =
+        e.currentTarget as HTMLElement;
+
+      // horizontal PADDING / 2 to compensate padding-margin combo of child container
+      // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
+      const itemWidth = (children[0] as HTMLElement).offsetWidth - padding / 2;
+      const scrollPoints = getScrollPoints({
+        gap,
+        padding,
+        clientWidth,
+        scrollWidth,
+        childElementCount,
+        itemWidth,
+      });
+
+      const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      setActiveIndex(index);
+      setIndexFraction(fraction);
+    };
+
+    return (
+      <div className={className}>
+        <SwipeListControlList
+          gap={gap}
+          padding={padding}
+          activeIndex={activeIndex}
+          onScroll={handleScroll}
+        >
+          {children}
+        </SwipeListControlList>
+        <SwipeListControlDots
+          activeIndex={activeIndex}
+          indexFraction={indexFraction}
+          showDots={showDots}
+        >
+          {children}
+        </SwipeListControlDots>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
+const BASE_DOT_WIDTH = 6;
+const ACTIVE_DOT_WIDTH_CHANGE = 16;
+const BASE_DOT_OPACITY = 0.3;
+const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+
+export interface SwipeListControlDotsProps {
+  activeIndex: number;
+  indexFraction: number;
+  showDots?: boolean;
+}
+
+export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
+  ({ children, activeIndex, indexFraction, showDots }) => {
+    return showDots && children?.length ? (
+      <div className="flex gap-2 mx-auto mt-[22px] w-fit">
+        {children?.map((_, idx) => (
+          <div
+            key={String(idx)}
+            className={`${DOT_STYLES}`}
+            style={getDotStyles(idx, activeIndex, indexFraction)}
+            aria-hidden
+          />
+        ))}
+      </div>
+    ) : null;
+  },
+);
+
+const getDotStyles = (
+  currentIdx: number,
+  activeIndex: number,
+  indexFraction: number,
+): Record<string, string> | null => {
+  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) return null;
+
+  const leftIndexMod = 1 - indexFraction;
+  const rightIndexMod = indexFraction;
+
+  return currentIdx === activeIndex
+    ? {
+        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
+        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
+      }
+    : {
+        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
+        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
+      };
+};

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

@@ -0,0 +1,20 @@
+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 ${className}`} role="listitem" {...rest}>
+        {children}
+      </div>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,19 @@
+import type { UniBlockProps } from '../../types';
+
+/**
+ * @title Контейнер
+ */
+export interface SwipeContainer {
+  /** @title Расстояние между элементами */
+  gap?: number;
+  /** @title Отступы */
+  padding?: number;
+}
+
+/**
+ * @title Swipe-контроллер
+ */
+export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
+  /** @title Точки-индикаторы */
+  showDots?: boolean;
+}

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

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,9 @@
+// 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.spec.ts

@@ -0,0 +1,19 @@
+import { getIndexParts } from './getIndexParts';
+
+// pre-baked array containing [start, end] boundary scrollLeft values for scrollableElements
+const scrollPoints: [number, number][] = [
+  [0, 100],
+  [100, 200],
+];
+
+describe('getIndexParts', () => {
+  it("should return index and it's decimal part if scrollLeft lies within given intervals, right boundary non-inclusive", () => {
+    expect(getIndexParts(0, scrollPoints)).toEqual({ index: 0, fraction: 0 });
+    expect(getIndexParts(199, scrollPoints)).toEqual({ index: 1, fraction: 0.99 });
+  });
+
+  it('should return index equal -1 and fraction equal 0 if scrollLeft is outside given intervals', () => {
+    expect(getIndexParts(-1, scrollPoints)).toEqual({ index: -1, fraction: 0 });
+    expect(getIndexParts(200, scrollPoints)).toEqual({ index: -1, fraction: 0 });
+  });
+});

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

@@ -0,0 +1,20 @@
+/*
+  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(([start, end]) => start <= scrollLeft && scrollLeft < end);
+  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.spec.ts

@@ -0,0 +1,24 @@
+import { getScrollPoints } from './getScrollPoints';
+
+const props = {
+  gap: 14,
+  padding: 16,
+  clientWidth: 500,
+  scrollWidth: 1914,
+  childElementCount: 4,
+  itemWidth: 460, // clientWidth - 1 * padding - gap = visible 10px of adjacent element
+};
+
+// pre-baked array containing accurate [start, end] boundary scrollLeft values for scrollableElements
+const scrollPoints: [number, number][] = [
+  [0, 470],
+  [470, 944],
+  [944, 1414],
+  [1414, 1914],
+];
+
+describe('getScrollPoints', () => {
+  it('should return array containing scroll breakpoints delimiting each child', () => {
+    expect(getScrollPoints(props)).toEqual(scrollPoints);
+  });
+});