@redneckz/wildless-cms-uni-blocks 0.5.10 → 0.5.12

package/src/icons/IconName.ts

@@ -1,98 +1,40 @@
 // Generated. Do not touch
 /* eslint-disable max-len, max-lines */
 
-export const IconInverseMap = {
-  ActualBalanceIcon: false,
-  AirPlaneIcon: false,
-  AppleIcon: true,
-  ArrowDownIcon: true,
-  ArrowLeftIcon: true,
-  ArrowUpIcon: true,
-  AtmIcon: true,
-  BankIcon: true,
-  BuildingIcon: true,
-  BurgerIcon: true,
-  Calendar2Icon: true,
-  CalendarCircleIcon: true,
-  CalendarIcon: true,
-  CalendarTickIcon: true,
-  Car2Icon: true,
-  CardIcon: true,
-  CardPosIcon: true,
-  CardTickIcon: true,
-  CardWithGemIcon: false,
-  CarIcon: false,
-  ChartSquareIcon: true,
-  CinemaIcon: false,
-  ClockIcon: false,
-  CloseIcon: true,
-  ComfortableCompIcon: false,
-  CreditCardsIcon: false,
-  DiscountShapeIcon: true,
-  DocDownloadIcon: true,
-  DocIcon: true,
-  DocIconMonoColor: true,
-  DocsIcon: false,
-  DocumentTextIcon: true,
-  DollarIcon: false,
-  DoneIcon: false,
-  DoneSimpleIcon: true,
-  EarthIcon: false,
-  EmptyWalletChangeIcon: true,
-  EmptyWalletIcon: true,
-  EuroIcon: false,
-  GeolocationIcon: true,
-  GlassIcon: false,
-  GlobalIcon: true,
-  GpsIcon: true,
-  GridIcon: true,
-  InterestGrowthIcon: false,
-  InterestIcon: true,
-  JCBIcon: false,
-  LogoIcon: true,
-  LoupeIcon: true,
-  MapMarkerClusterIcon: false,
-  MapMarkerSingleIcon: false,
-  MasterCardIcon: false,
-  MinusIcon: true,
-  MirIcon: false,
-  MoneyIcon: true,
-  MoneyInsuranceIcon: false,
-  MoneysIcon: true,
-  MonitorMobileIcon: true,
-  NewDocIcon: false,
-  OfficeIcon: false,
-  OkIcon: true,
-  PackA4Icon: false,
-  PassSendIcon: false,
-  PercentageRoundIcon: true,
-  PercentageSquareIcon: true,
-  PersonalCardIcon: true,
-  PlayMarketIcon: true,
-  PlusIcon: true,
-  PowerIcon: false,
-  Profile2UserIcon: true,
-  ProfileIcon: true,
-  PumpkinIcon: false,
-  RoundRubleIcon: true,
-  SafeIcon: true,
-  ShieldTickIcon: true,
-  SignDocsIcon: false,
-  SmallClockIcon: true,
-  SoundIcon: false,
-  StrongBoxIcon: true,
-  TelegramIcon: true,
-  UnionPayIcon: false,
-  UserSquareIcon: true,
-  UserTickIcon: true,
-  VisaIcon: false,
-  VKIcon: true,
-  WalletAdd2Icon: true,
-  WalletAddIcon: true,
-  WalletIcon: true,
-  WalletWithMoneyIcon: true,
-  WateringCanIcon: false,
-};
+export const IconsWithoutInversion = new Set([
+  'ActualBalanceIcon',
+  'AirPlaneIcon',
+  'CardWithGemIcon',
+  'CarIcon',
+  'CinemaIcon',
+  'ClockIcon',
+  'ComfortableCompIcon',
+  'CreditCardsIcon',
+  'DocsIcon',
+  'DollarIcon',
+  'DoneIcon',
+  'EarthIcon',
+  'EuroIcon',
+  'GlassIcon',
+  'InterestGrowthIcon',
+  'JCBIcon',
+  'MapMarkerClusterIcon',
+  'MapMarkerSingleIcon',
+  'MasterCardIcon',
+  'MirIcon',
+  'MoneyInsuranceIcon',
+  'NewDocIcon',
+  'OfficeIcon',
+  'PackA4Icon',
+  'PassSendIcon',
+  'PowerIcon',
+  'PumpkinIcon',
+  'SignDocsIcon',
+  'SoundIcon',
+  'UnionPayIcon',
+  'VisaIcon',
+  'WateringCanIcon',
+]);
 
 export enum IconMap {
   ActualBalanceIcon = 'ActualBalanceIcon',

package/src/model/HeadlineType.ts

@@ -4,6 +4,12 @@
  */
 export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S';
 
+/**
+ * @title Размер заголовка
+ * @enumNames ["Самый большой тонкий", "Самый большой", "Очень большой тонкий", "Очень большой", "Большой", "Средний", "Маленький"]
+ */
+export type HeadlineSmallVersion = 'XL_L' | 'XL_R' | 'L_L' | 'L_R' | 'M' | 'S' | 'XS';
+
 export type TitleProps = {
   /** @title Заголовок */
   title?: string;
@@ -24,3 +30,7 @@ export type HeadlineCommonProps = TitleProps & DescriptionProps;
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;
 };
+
+export type HeadlineSmallProps = HeadlineCommonProps & {
+  headlineSmallVersion?: HeadlineSmallVersion;
+};

package/src/model/Picture.ts

@@ -49,6 +49,7 @@ export interface ImgSource {
   alignment?: ImgAlignment;
   /** @title Иконка */
   icon?: IconName;
+  /** @title Версия иконки */
   iconVersion?: IconVersion;
   /** @title Картинка */
   src?: string;

package/src/react/setup-fixture.ts

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
 import { projectSettings } from '../ProjectSettings';
 import wlc from '../wlc.json';
-import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 const TEST_ORIGIN = 'http://localhost:5001';
 
@@ -35,7 +34,6 @@ export const context: ContentPageContext = {
       ev.preventDefault();
       console.log(ev.target, ev, targetContent);
     },
-  IntersectionObserverTag,
 };
 
 export const mobileContext: ContentPageContext = {

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

@@ -26,16 +26,13 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
 
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
   const listItemAlign = description ? 'items-start' : 'items-center';
+  const iconVersion = getIconVersion(icon, isIconWhite);
 
   return (
     <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
         <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
-          <Img
-            className="w-6 h-6"
-            image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-            asSVG
-          />
+          <Img className="w-6 h-6" image={{ ...icon, iconVersion }} asSVG />
         </div>
       ) : null}
       <div className="gap-0.5">
@@ -59,3 +56,6 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
 
   return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }
+
+const getIconVersion = (icon, isIconWhite) =>
+  icon?.iconVersion || isIconWhite ? 'white' : 'normal';

package/src/ui-kit/BlockWrapper.tsx

@@ -1,37 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
 import { EventBus } from '../EventBus/EventBus';
 import type { UniBlockProps } from '../model/ContentPageDef';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
+import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
-  context: ContentPageContext;
-  className?: string;
   anchor?: string;
   tag?: keyof HTMLElementTagNameMap;
 }
 
+const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
+const THRESHOLD_ARRAY_LENGTH = 18;
+const THRESHOLD_ARRAY_START_VALUE =
+  (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
+
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, context, children, tag = 'section', labels }) => {
+  ({ anchor, className, children, tag = 'section', labels }) => {
     const Tag: any = tag;
 
-    const { IntersectionObserverTag } = context;
     const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
+    const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
 
-    useEffect(
-      () =>
-        EventBus.inst.subscribe('tab', (event) => {
-          if (event.type === 'group') {
-            setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
-          } else {
-            setShouldRenderBlock(true);
-            scrollToBlock(event.label);
-          }
-        }),
-      [labels],
+    const observerCallback = useMemo(
+      () => changeHashOnObserve({ anchor, anchorClickRef }),
+      [anchor],
     );
 
+    useEffect(() => {
+      const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
+        anchorClickRef.current = e;
+      });
+      const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
+        if (event.type === 'group') {
+          setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+        } else {
+          changeHash(event.label);
+          setShouldRenderBlock(true);
+        }
+      });
+
+      return () => {
+        anchorClickCleanup();
+        tabCleanup();
+      };
+    }, []);
+
     if (!shouldRenderBlock) {
       return null;
     }
@@ -40,8 +55,10 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       <IntersectionObserverTag
         tag={tag}
         className={className}
-        observerCallback={changeHashOnObserve}
-        observerOptions={{ threshold: 1 }} // Lower threshold when hash change needed
+        observerCallback={observerCallback}
+        observerOptions={{
+          threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
+        }}
         anchor={anchor}
       >
         {children}
@@ -52,8 +69,14 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   },
 );
 
-function scrollToBlock(label?: string) {
-  setTimeout(() =>
-    globalThis.document.getElementById(`#${label}`)?.scrollIntoView({ behavior: 'smooth' }),
-  );
+function getIntersectionThreshold(_: number, i: number): number {
+  const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
+
+  return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
+}
+
+function changeHash(label?: string) {
+  if (label) {
+    globalThis.document.location.hash = label;
+  }
 }

package/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -12,7 +12,7 @@ export type EmbeddableBlocksProps = {
 };
 
 export const renderBlocksList = ({ blocks, context, className = '' }: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className })) : null;
+  blocks?.length ? blocks.map(renderBlock({ context, className })) : [];
 
 const renderBlock =
   ({ context, className }: UniBlockProps) =>

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

@@ -41,7 +41,7 @@ export const Button = JSX<ButtonWithIconProps>(
   }) => {
     // It isn't a valid HTML attribute. Must be excluded from "rest"
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { asSVG, iconRight, appendRight, icon, ...buttonInnerRest } = rest;
+    const { appendRight, ...buttonInnerRest } = rest;
     const buttonInner = children ?? (
       <ButtonInner
         text={text}

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

@@ -1,37 +1,65 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ButtonInner } from './ButtonInner';
 import type { ButtonWithIconProps } from './ButtonProps';
-import { getRegularButtonClasses } from './getRegularButtonClasses';
 import { getDisabledButtonClasses } from './getDisabledButtonClasses';
+import { getRegularButtonClasses } from './getRegularButtonClasses';
 
-export const Button = JSX<ButtonWithIconProps>((props) => {
-  const { text, aboveText, appendLeft, appendRight, children, disabled, rounded, ...rest } = props;
-  // its non valid HTML attribute. Must be excluded from "rest"
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { asSVG, iconRight, icon, ...usedProps } = rest;
-  const buttonInner = children ?? (
-    <ButtonInner
-      text={text}
-      aboveText={aboveText}
-      appendLeft={appendLeft}
-      appendRight={appendRight}
-      rounded={rounded}
-    />
-  );
+export const Button = JSX<ButtonWithIconProps>(
+  ({
+    aboveText,
+    appendLeft,
+    appendRight,
+    ariaLabel,
+    children,
+    className,
+    disabled,
+    href,
+    onClick,
+    rel,
+    rounded,
+    target,
+    text,
+    version,
+  }) => {
+    const buttonInner = children ?? (
+      <ButtonInner
+        aboveText={aboveText}
+        appendLeft={appendLeft}
+        appendRight={appendRight}
+        rounded={rounded}
+        text={text}
+        version={version}
+      />
+    );
 
-  return disabled ? (
-    <DisabledButton rounded={rounded} {...usedProps}>
-      {buttonInner}
-    </DisabledButton>
-  ) : (
-    <RegularButton rounded={rounded} {...usedProps}>
-      {buttonInner}
-    </RegularButton>
-  );
-});
+    return disabled ? (
+      <DisabledButton
+        ariaLabel={ariaLabel}
+        className={className}
+        rounded={rounded}
+        version={version}
+      >
+        {buttonInner}
+      </DisabledButton>
+    ) : (
+      <RegularButton
+        ariaLabel={ariaLabel}
+        className={className}
+        href={href}
+        onClick={onClick}
+        rel={rel}
+        rounded={rounded}
+        target={target}
+        version={version}
+      >
+        {buttonInner}
+      </RegularButton>
+    );
+  },
+);
 
 const RegularButton = JSX<ButtonWithIconProps>(
-  ({ className = '', ariaLabel, version, rounded, href, target, children, onClick, ...rest }) => {
+  ({ className = '', ariaLabel, version, rounded, href, target, children, onClick, rel }) => {
     return (
       <a
         className={getRegularButtonClasses({ className, version, rounded })}
@@ -40,7 +68,7 @@ const RegularButton = JSX<ButtonWithIconProps>(
         onClick={onClick}
         aria-label={ariaLabel}
         role={href ? 'link' : 'button'}
-        {...rest}
+        rel={rel}
       >
         {children}
       </a>

package/src/ui-kit/Button/ButtonInner.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import { iconStyleMap } from './buttonClassNameConstants';
 import type { ButtonWithIconProps } from './ButtonProps';
 
 interface ButtonInnerProps extends ButtonWithIconProps {
@@ -7,18 +8,18 @@ interface ButtonInnerProps extends ButtonWithIconProps {
 }
 
 export const ButtonInner = JSX<ButtonInnerProps>((props) => {
-  const { text, aboveText, appendLeft, appendRight } = props;
+  const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
 
   return (
     <div className={getButtonStyle(props)}>
-      {appendLeft ? appendLeft : null}
+      {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
       {isWithText(props) ? (
         <div>
           <div className="text-xs-light text-left">{aboveText}</div>
           <div className={`text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}
-      {appendRight ? appendRight : null}
+      {appendRight ? <div className={iconStyleMap[version]}>{appendRight}</div> : null}
     </div>
   );
 });

package/src/ui-kit/Button/ButtonProps.ts

@@ -1,6 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps, Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 
 /**
@@ -29,18 +29,12 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
-  /** @title Иконка слева */
-  icon?: Picture;
-  /** @title Иконка справа */
-  iconRight?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */
   appendLeft?: VNode;
   /** @hidden */
   appendRight?: VNode;
-  /** @hidden */
-  asSVG?: boolean;
 }
 
 export interface ButtonContent {

package/src/ui-kit/Button/ButtonSection.tsx

@@ -1,60 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { HandlerDecorator, Router } from '../../components/ContentPage/ContentPageContext';
 import { useLink } from '../../hooks/useLink';
 import { UniBlockProps } from '../../model/ContentPageDef';
-import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 
 export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
 
+interface ButtonSectionItemProps {
+  button: ButtonWithIconProps;
+  router: Router;
+  handlerDecorator?: HandlerDecorator;
+}
+
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
   const { handlerDecorator } = context;
   const router = context.useRouter();
 
   return buttons && buttons?.length ? (
     <div className={className}>
-      {buttons.map((button, index) =>
-        renderButton(useLink({ router, handlerDecorator }, button), index),
-      )}
+      {buttons.map((button, index) => (
+        <ButtonSectionItem
+          button={button}
+          handlerDecorator={handlerDecorator}
+          key={String(index)}
+          router={router}
+        />
+      ))}
     </div>
   ) : null;
 });
 
-function renderButton(
-  { icon, iconRight, version = 'primary', ...button }: ButtonWithIconProps,
-  i: number,
-) {
-  if (!button?.text) {
-    return null;
-  }
-  const imgStyle = version === 'primary' ? 'group-hover:text-black' : 'group-hover:text-white';
-  const iconVersion = version === 'secondary' ? 'normal' : 'white';
+const ButtonSectionItem = JSX<ButtonSectionItemProps>(({ router, handlerDecorator, button }) => {
+  const buttonProps = useLink({ router, handlerDecorator }, button);
 
-  return icon ? (
-    <Button
-      key={String(i)}
-      appendLeft={
-        <Img
-          imageClassName={imgStyle}
-          image={{ ...icon, iconVersion: iconVersion }}
-          width="24"
-          height="24"
-          asSVG
-        />
-      }
-      appendRight={
-        <Img
-          imageClassName={imgStyle}
-          image={{ ...iconRight, iconVersion: iconVersion }}
-          width="24"
-          height="24"
-          asSVG
-        />
-      }
-      version={version}
-      {...button}
-    />
-  ) : (
-    <Button key={String(i)} version={version} {...button} />
-  );
-}
+  return <Button {...button} {...buttonProps} />;
+});

package/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -19,3 +19,10 @@ export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
 };
 
 export const buttonStyle = 'text-center font-sans select-none';
+
+export const iconStyleMap: Record<ButtonVersion, string> = {
+  primary: 'group-hover:brightness-0 group-hover:invert',
+  secondary: 'group-hover:brightness-0 group-hover:invert',
+  white: 'group-hover:brightness-0 group-hover:invert',
+  link: '',
+};

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

@@ -1,46 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { clamp } from '../../utils/clamp';
+import { adjustValue, localNumberFormat } from './adjustValue ';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Input } from '../Input/Input';
 import type { CurrencyInputProps } from './CurrencyInputProps';
 
 export const CurrencyInput = JSX<CurrencyInputProps>(
-  ({
-    className = '',
-    label,
-    onChange,
-    value = '',
-    minValue = 0,
-    maxValue = 300000,
-    ...inputProps
-  }) => {
-    const handleChange = (e: any) => {
-      if (!onChange) {
-        return;
-      }
-
-      const newValue =
-        e.target.value === '' ? '' : String(clamp(e.target.value as number, minValue, maxValue));
+  ({ className = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
+    const handleChange = useCallback(
+      (inputValue: string) => {
+        if (!onChange) {
+          return;
+        }
+        const adjustedVal = adjustValue(inputValue);
+        const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
+        onChange(String(clampVal));
+      },
+      [onChange],
+    );
 
-      onChange(newValue);
-    };
+    const handleBlur = useCallback(
+      (inputValue: string) => {
+        if (!onChange) {
+          return;
+        }
+        onChange(localNumberFormat(inputValue));
+      },
+      [onChange],
+    );
 
     return (
-      <div className={className}>
-        {label ? <label className="block text-m-light mb-2">{label}</label> : null}
-        <div className="h-[56px] relative flex items-center">
-          <input
-            type="number"
-            className={
-              'text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
-            }
-            onChange={handleChange}
-            value={value}
-            min={minValue}
-            max={maxValue}
-            {...inputProps}
-          />
-          <span className="text-xl-light absolute right-4">₽</span>
-        </div>
-      </div>
+      <Input
+        className={className}
+        inputClassName="w-full"
+        onChange={handleChange}
+        onBlur={handleBlur}
+        {...inputProps}
+      >
+        <span className="text-xl-light absolute right-4 bottom-4">₽</span>
+      </Input>
     );
   },
 );
+
+const getClampValue = (val: string, clampVal: number): string =>
+  Number(val) === clampVal ? val : String(clampVal);

package/src/ui-kit/CurrencyInput/CurrencyInputProps.ts

@@ -1,10 +1,6 @@
-export type CurrencyInputProps = {
-  className?: string;
-  label?: string;
-  onChange?: (value: string) => void;
-  name?: string;
-  value?: string;
-  placeholder?: string;
+import type { InputProps } from '../Input/InputProps';
+
+export type CurrencyInputProps = InputProps & {
   minValue?: number;
   maxValue?: number;
 };