@redneckz/wildless-cms-uni-blocks 0.16.1-credit → 0.16.2-credit

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,60 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useLocation } from '../../hooks/useLocation';
-import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { style } from '../../utils/style';
-import { Currency } from './CurrencyProps';
-import { CurrencyTable } from './CurrencyTable';
-import { CurrentLocation } from './CurrentLocation';
-import {
-  ExchangeCurrencyCalculator,
-  type ExchangeCurrencyItem,
-} from './ExchangeCurrencyCalculator';
-import { type ExchangeRateTileContent } from './ExchangeRateTileContent';
-import { useFetchExchangeRateData } from './useFetchExchangeRateData';
-
-export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
-
-export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
-  ({ className = '', title = 'Курсы обмена валют', button, ...rest }) => {
-    const currentLocation = useLocation();
-    const exchangeRates = useFetchExchangeRateData(currentLocation);
-
-    const currencyRates = getCurrencyRates(exchangeRates?.exchangeRate?.currencies);
-
-    const currencyRatesBuy = currencyRates.filter((_) => _.buyExchangeRate);
-    currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
-
-    const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
-    currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-
-    return (
-      <BlockWrapper className={style('box-border min-h-80', className)} {...rest}>
-        <BaseTile
-          className="h-full"
-          title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap" />}
-        >
-          <div className="flex w-full gap-6xl flex-wrap @lg:flex-nowrap">
-            <div className="w-full @2xl:w-auto @5xl:w-1/2">
-              {currencyRates ? (
-                <CurrencyTable className="mb-xl" exchangeCurrencyItems={currencyRates} />
-              ) : null}
-              <CurrentLocation address={exchangeRates?.address} />
-            </div>
-            <ExchangeCurrencyCalculator
-              className="grow w-1/2"
-              currencyRatesBuy={currencyRatesBuy}
-              currencyRatesSell={currencyRatesSell}
-              button={button}
-            />
-          </div>
-        </BaseTile>
-      </BlockWrapper>
-    );
-  },
-);
-
-const getCurrencyRates = (currencies?: ExchangeCurrencyItem[]) =>
-  currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id as number)) || [];

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

@@ -1,8 +0,0 @@
-{
-  "content": {},
-  "style": {
-    "ui:options": {
-      "minCols": 6
-    }
-  }
-}

package/mobile/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,11 +0,0 @@
-import { type TitleProps } from '../../model/HeadlineType';
-import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
-import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
-
-/**
- * @title Курсы обмена валют
- */
-export type ExchangeRateTileContent = UniBlockContent &
-  TitleProps & {
-    button?: LinkButtonContent;
-  };

package/mobile/src/components/ExchangeRateTile/calculateResult.ts

@@ -1,9 +0,0 @@
-import { roundTo } from '../../utils/roundTo';
-
-export const calculateResult = (value: string, rate: number, precision: boolean) => {
-  const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
-
-  return Number.isInteger(result) ? result : roundTo(result);
-};
-
-export const formatValue = (value: string) => value.replace(/[^\d.,]/g, '').replace(',', '.');

package/mobile/src/components/ExchangeRateTile/callbackCurrencySelect.ts

@@ -1,25 +0,0 @@
-import { tableFunc } from '../../utils/tableFunc';
-import { Currency } from './CurrencyProps';
-
-interface TableFuncProps {
-  value: Currency;
-  oppositeValue: Currency;
-  handleConvert: (currencyFrom?: Currency, currencyTo?: Currency) => void;
-}
-
-export const callbackCurrencySelect = (props: TableFuncProps) =>
-  tableFunc<TableFuncProps, () => void>([
-    [
-      (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
-      () => props.handleConvert(props.value, Currency.RUB),
-    ],
-    [
-      (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
-      () => props.handleConvert(props.value, Currency.USD),
-    ],
-    [
-      (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
-      () => props.handleConvert(props.value, Currency.CNY),
-    ],
-    [() => true, () => props.handleConvert(props.value)],
-  ])(props)?.();

package/mobile/src/components/ExchangeRateTile/formatCurrency.ts

@@ -1,8 +0,0 @@
-import { Currency } from './CurrencyProps';
-
-const currencyNumberFormat = new Intl.NumberFormat('ru', {
-  style: 'currency',
-  currency: Currency.RUB,
-});
-
-export const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,44 +0,0 @@
-import { Input } from '../../ui-kit/Input/Input';
-import { type Option } from '../../ui-kit/Select/Option';
-import { Select } from '../../ui-kit/Select/Select';
-import { type Currency } from './CurrencyProps';
-import { type ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
-
-interface InputProps {
-  placeholder: string;
-  rates: ExchangeCurrencyItem[];
-  selected: string;
-  setSelected: (value: Currency) => void;
-  value: string;
-  setValue: (value: string) => void;
-}
-
-export function renderInput(props: InputProps) {
-  const { placeholder, rates, selected, value, setValue, setSelected } = props;
-  const ratesOptions: Option[] = rates.map((_) => ({
-    key: _?.currency?.currency ?? '',
-    text: _?.currency?.currency ?? '',
-  }));
-  const selectedValue: Option = { key: selected, text: selected };
-
-  return (
-    <div className="relative flex">
-      <Input
-        className="shrink-0 text-l w-full appearance-none -mr-20"
-        placeholder={placeholder}
-        type="text"
-        value={value}
-        onChange={setValue}
-      />
-      {ratesOptions.length ? (
-        <Select
-          className="absolute right-0"
-          isBorder={false}
-          onChange={(_) => setSelected(_.key as Currency)}
-          options={ratesOptions}
-          value={selectedValue}
-        />
-      ) : null}
-    </div>
-  );
-}

package/mobile/src/components/ExchangeRateTile/useFetchExchangeRateData.ts

@@ -1,25 +0,0 @@
-import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import { API_BASE_URI } from '../../api/apiBaseUrl';
-import { type ExchangeCurrencyItem } from '../../components/ExchangeRateTile/ExchangeCurrencyCalculator';
-import { type Region } from '../../hooks/useRegions';
-import { fetchJSONUnsafe, type FetchJSONUnsafeType } from '../../utils/fetchJSON';
-
-export interface ExchangeData {
-  exchangeRate?: {
-    currencies?: ExchangeCurrencyItem[];
-  };
-  address?: string;
-}
-
-const EXCHANGE_RATES_URL = `${API_BASE_URI}/exchangerates`;
-
-export function useFetchExchangeRateData(currentRegion: Region) {
-  const regionCode = currentRegion?.code || '000';
-
-  const { data } = useAsyncData(
-    EXCHANGE_RATES_URL + `?regionCode=${regionCode}`,
-    fetchJSONUnsafe as FetchJSONUnsafeType<ExchangeData>,
-  );
-
-  return data || {};
-}

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

@@ -1,89 +0,0 @@
-{
-  "content": {
-    "version": "primary",
-    "padding": "",
-    "title": "Заголовок",
-    "insuranceTabs": [
-      {
-        "title": "Описание 1",
-        "cards": [
-          {
-            "sum": 200000,
-            "fee": 2100,
-            "icon": {
-              "format": "webp",
-              "size": {
-                "width": 70,
-                "height": 70
-              },
-              "icon": "ActualBalanceIcon"
-            },
-            "href": ""
-          },
-          {
-            "sum": 200000,
-            "fee": 2100,
-            "icon": {
-              "format": "webp",
-              "size": {
-                "width": 70,
-                "height": 70
-              },
-              "icon": "ActualBalanceIcon"
-            },
-            "href": ""
-          }
-        ]
-      },
-      {
-        "title": "Описание 2",
-        "cards": [
-          {
-            "sum": 200000,
-            "fee": 2100,
-            "icon": {
-              "format": "webp",
-              "size": {
-                "width": 70,
-                "height": 70
-              },
-              "icon": "ActualBalanceIcon"
-            },
-            "href": ""
-          },
-          {
-            "sum": 200000,
-            "fee": 2100,
-            "icon": {
-              "format": "webp",
-              "size": {
-                "width": 70,
-                "height": 70
-              },
-              "icon": "ActualBalanceIcon"
-            },
-            "href": ""
-          },
-          {
-            "sum": 200000,
-            "fee": 2100,
-            "icon": {
-              "format": "webp",
-              "size": {
-                "width": 70,
-                "height": 70
-              },
-              "icon": "ActualBalanceIcon"
-            }
-          }
-        ]
-      }
-    ],
-    "button": {
-      "href": "",
-      "text": "Выбрать программу",
-      "target": "_self",
-      "version": "primary"
-    }
-  }
-}

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,82 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { style } from '../../utils/style';
-import { type InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
-import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
-
-interface NavButtonProps {
-  title?: string;
-  i: number;
-  isActive: boolean;
-  onClick: () => void;
-}
-
-export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
-
-export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
-  ({ className = '', title, insuranceTabs = [], button, ...rest }) => {
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
-
-    return (
-      <BlockWrapper
-        className={style('box-border overflow-hidden relative px-0 space-y-2xl', className)}
-        defaultPadding="p-6xl"
-        {...rest}
-      >
-        {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
-        {insuranceTabs?.length > 1 ? (
-          <div className="p-xs bg-secondary-light w-fit mx-auto rounded-md">
-            {insuranceTabs.map((item, i) =>
-              renderNavButton({
-                title: item?.title,
-                i,
-                isActive: Boolean(i === activeSlideIndex),
-                onClick: () => handleActiveSlideIndex(i),
-              }),
-            )}
-          </div>
-        ) : null}
-        <div
-          className="flex"
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
-          role="list"
-        >
-          {renderInsuranceGalleries({
-            insuranceTabs,
-            button,
-          })}
-        </div>
-      </BlockWrapper>
-    );
-  },
-);
-
-const renderInsuranceGalleries = ({ insuranceTabs, button }: InsuranceAmountBlockContent) => {
-  const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
-
-  return insuranceGalleries?.length
-    ? insuranceGalleries.map((cards, i) => (
-        <InsuranceAmountBlockInner key={String(i)} button={button} cards={cards} />
-      ))
-    : null;
-};
-
-function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
-  const btnClassName = isActive ? 'bg-primary-main text-white rounded-md' : `text-secondary-text`;
-
-  return (
-    <button
-      type="button"
-      key={String(i)}
-      onClick={onClick}
-      aria-label={`Кнопка ${title}`}
-      className={`box-border px-m py-s text-m font-light ${btnClassName}`}
-    >
-      {title}
-    </button>
-  );
-}

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

@@ -1,21 +0,0 @@
-{
-  "content": {
-    "insuranceTabs": {
-      "items": {
-        "cards": {
-          "items": {
-            "fee": {
-              "ui:field": "number"
-            },
-            "sum": {
-              "ui:field": "number"
-            },
-            "icon": {
-              "ui:field": "icon"
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,35 +0,0 @@
-import { type TitleProps } from '../../model/HeadlineType';
-import { type IconProps } from '../../model/Picture';
-import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
-import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
-
-/**
- * @title Кнопка выбора программы
- */
-export type CardItem = IconProps & {
-  /** @title Страховой взнос */
-  fee?: number;
-  /** @title Страховая сумма */
-  sum?: number;
-  /** @title Ссылка на программу*/
-  href?: string;
-};
-
-/**
- * @title Вкладка
- */
-export type InsuranceAmountBlockTab = TitleProps & {
-  /** @title Содержимое вкладки */
-  cards?: CardItem[];
-};
-
-/**
- * @title Страховые суммы
- */
-export type InsuranceAmountBlockContent = UniBlockContent &
-  TitleProps & {
-    /** @title Список вкладок */
-    insuranceTabs?: InsuranceAmountBlockTab[];
-    /** @title Кнопка */
-    button?: LinkButtonContent;
-  };

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,145 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import { Img } from '../../ui-kit/Img/Img';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
-import { type ButtonCommonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
-import { renderArrows } from '../../ui-kit/LinkButton/renderArrows';
-import { Text } from '../../ui-kit/Text/Text';
-import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
-import { type CardItem, type InsuranceAmountBlockTab } from './InsuranceAmountBlockContent';
-
-export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab {
-  className?: string;
-  button?: ButtonCommonContent;
-}
-
-type InsuranceGalleryProps = {
-  activeIndex: number;
-  cards: CardItem[];
-  selectedCardIndex: number;
-  onClick: (index: number) => void;
-};
-
-type NavButtonProps = {
-  slide: CardItem;
-  i: number;
-  isActive: boolean;
-  onClick: () => void;
-};
-
-export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
-  ({ className = '', cards = [], button }) => {
-    const [selectedCardIndex, setSelectedCardIndex] = useState(0);
-    const handleSelectedCardIndex = useCallback((_: number) => setSelectedCardIndex(_), []);
-    const galleryLength = cards.length;
-    const CARD_VIEW_COUNT = 2;
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: galleryLength,
-      visibleItemCount: CARD_VIEW_COUNT,
-    });
-    const { canDec, canInc } = controls;
-    const activeHref = cards[activeIndex]?.href;
-
-    return (
-      <section role="listitem" className={`min-w-full text-center ${className}`}>
-        <div className="relative overflow-hidden" aria-label="Страховые программы">
-          {galleryLength
-            ? renderGallery({
-                activeIndex,
-                cards,
-                selectedCardIndex,
-                onClick: handleSelectedCardIndex,
-              })
-            : null}
-          {renderArrows({
-            ...controls,
-            btnClass: ['left-12', 'right-12'],
-            className: 'top-16',
-          })}
-          {canDec ? (
-            <div className="absolute top-0 left-0 h-full w-32 bg-opacity-from-white" />
-          ) : null}
-          {canInc ? (
-            <div className="absolute top-0 right-0 h-full w-32 bg-opacity-to-white" />
-          ) : null}
-        </div>
-        <LinkButton className="w-60 text-center" version="primary" {...button} href={activeHref} />
-      </section>
-    );
-  },
-);
-
-function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: InsuranceGalleryProps) {
-  const tabsShiftWidth = activeIndex * 460;
-  const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
-
-  return (
-    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-6xl">
-      <div className={`w-full flex flex-nowrap gap-s pb-6xl ${cardsAlignStyle}`}>
-        {cards.map((slide, i) =>
-          renderNavButton({
-            slide,
-            i,
-            isActive: Boolean(i === selectedCardIndex),
-            onClick: () => onClick(i),
-          }),
-        )}
-      </div>
-    </div>
-  );
-}
-
-function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
-  const btnClassName = isActive
-    ? 'shadow-dark-blue border-primary-main'
-    : `ease-in duration-300 border-gray`;
-
-  return (
-    <button
-      type="button"
-      key={String(i)}
-      onClick={onClick}
-      className={`p-3xl min-w-fit flex items-center gap-2xl bg-white border-solid border relative ${btnClassName}`}
-    >
-      {slide?.icon ? (
-        <Img
-          className="p-lg rounded-full bg-secondary-light"
-          image={slide.icon}
-          width="108"
-          height="108"
-        />
-      ) : null}
-
-      <div className="flex gap-s">
-        {slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null}
-        {slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null}
-      </div>
-      {renderDoneIcon(isActive)}
-    </button>
-  );
-}
-
-function renderValueBlock(title: string, sum: number) {
-  return (
-    <div className="flex flex-col text-left whitespace-pre">
-      <Text size="text-h6">{toLocalNumberFormat(2)(sum)} ₽</Text>
-      <div className="mt-2xs">
-        <Text size="text-l" color="text-secondary-text">
-          {title}
-        </Text>
-      </div>
-    </div>
-  );
-}
-
-function renderDoneIcon(isActive: boolean) {
-  return isActive ? (
-    <Img
-      className={`h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`}
-      image={{ icon: 'DoneIcon' }}
-      width="24"
-      height="24"
-    />
-  ) : null;
-}

package/mobile/src/ui-kit/ControlStateProps.ts

@@ -1,3 +0,0 @@
-export interface ControlStateProps {
-  disabled?: boolean;
-}

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

@@ -1,39 +0,0 @@
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { Icon } from '../Icon/Icon';
-
-export const Rating = () => {
-  const [rating, setRating] = useState(0);
-  const [hoverRating, setHoverRating] = useState(0);
-
-  const handleClick = (event: { currentTarget: { id: string } }) => {
-    setRating(parseInt(event.currentTarget.id));
-  };
-
-  const handleMouseEnter = (event: { currentTarget: { id: string } }) => {
-    setHoverRating(parseInt(event.currentTarget.id));
-  };
-
-  const handleMouseLeave = () => {
-    setHoverRating(0);
-  };
-
-  return (
-    <div className="flex justify-center">
-      {[...Array(5)].map((_, i) => (
-        <span
-          key={i}
-          onClick={handleClick}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          id={`${i + 1}`}
-        >
-          <Icon
-            name="StarIcon"
-            iconVersion={rating >= i + 1 || hoverRating >= i + 1 ? 'color' : 'gray'}
-            className="cursor-pointer w-14 h-14"
-          />
-        </span>
-      ))}
-    </div>
-  );
-};

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

@@ -1,26 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { Text } from '../Text/Text';
-import { type UnitProps } from './UnitProps';
-
-export const Unit = JSX<UnitProps>(({ prefix, unit, suffix }) => (
-  <div className="w-full flex items-end">
-    {prefix ? (
-      <div className="gradient-color-text">
-        <Text size="text-h2">{prefix}</Text>
-      </div>
-    ) : null}
-    {unit ? (
-      // -mb-n добавлен для выравнивания unit относительно prefix и suffix, тк шрифт font-mohave неправильно высчитывает line-height
-      <div className="-mb-6 @xl:-mb-4">
-        <span className="font-mohave text-title-large sm:text-title-extra gradient-color-text">
-          {unit}
-        </span>
-      </div>
-    ) : null}
-    {suffix ? (
-      <div className="gradient-color-text">
-        <Text size="text-h2">{suffix}</Text>
-      </div>
-    ) : null}
-  </div>
-));

package/mobile/src/ui-kit/Unit/UnitProps.ts

@@ -1,8 +0,0 @@
-export interface UnitProps {
-  /** @title Префикс */
-  prefix?: string;
-  /** @title Значение */
-  unit?: number;
-  /** @title Суффикс */
-  suffix?: string;
-}

package/src/components/CarouselCard/CarouselCard.example.json

@@ -1,14 +0,0 @@
-{
-  "content": {
-    "version": "primary",
-    "padding": "",
-    "title": "Заголовок",
-    "description": "Описание",
-    "button": {
-      "href": "",
-      "text": "Подробнее",
-      "target": "_self",
-      "version": "primary"
-    }
-  }
-}