@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

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,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { clamp } from '../../utils/clamp';
-import { adjustValue } from './adjustValue ';
+import { adjustValue, localNumberFormat } from './adjustValue ';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { Input } from '../Input/Input';
 import type { CurrencyInputProps } from './CurrencyInputProps';
@@ -19,13 +19,29 @@ export const CurrencyInput = JSX<CurrencyInputProps>(
       [onChange],
     );
 
+    const handleBlur = useCallback(
+      (inputValue: string) => {
+        if (!onChange) {
+          return;
+        }
+        onChange(localNumberFormat(inputValue));
+      },
+      [onChange],
+    );
+
     return (
-      <Input className={className} inputClassName="w-full" onChange={handleChange} {...inputProps}>
+      <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) =>
+const getClampValue = (val: string, clampVal: number): string =>
   Number(val) === clampVal ? val : String(clampVal);

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

@@ -1,6 +1,17 @@
-export const adjustValue = (val: string) => onlyOneDot(setZeroStart(replaceCommaToDot(val)));
+import { getSanitizedValue } from '../../utils/getSanitizedValue';
 
-const onlyOneDot = (val: string): string => {
+export const adjustValue = (val: string) =>
+  onlyOneDot(setZeroStart(replaceCommaToDot(getSanitizedValue(val))));
+
+export const localNumberFormat = (val: string): string =>
+  new Intl.NumberFormat('ru-RU', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  })
+    .format(Number(getSanitizedValue(val)))
+    .replace(',', '.');
+
+export const onlyOneDot = (val: string): string => {
   const matches = val.match(/\./g) || [];
 
   return matches.length > 1 ? val.slice(0, val.lastIndexOf('.')) : val;

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -0,0 +1,52 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ColorPalette } from '../../model/ContentPageDef';
+import type { IconName } from '../Icon/IconProps';
+import { Img } from '../Img/Img';
+import type { FoldablePartProps } from './FoldablePartProps';
+
+interface DefaultFoldButtonProps {
+  className?: string;
+  label: string;
+  icon: IconName;
+  dataTheme?: ColorPalette;
+  onClick?: () => void;
+}
+
+export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
+  ({ className, label, icon, dataTheme = '', onClick }) => (
+    <button
+      className={`border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${
+        className || ''
+      }`}
+      data-theme={dataTheme}
+      onClick={onClick}
+    >
+      <span className="text-h4 pr-3">{label}</span>
+      {icon ? (
+        <Img
+          image={{
+            icon,
+            iconVersion: 'white',
+          }}
+          className="flex-shrink-0 my-auto"
+          width="20"
+          height="20"
+          asSVG
+        />
+      ) : null}
+    </button>
+  ),
+);
+
+export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {
+  const labels = ['Развернуть', 'Скрыть'];
+  const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
+
+  return (
+    <DefaultFoldButton
+      icon={icons[Number(isUnfolded)]}
+      label={labels[Number(isUnfolded)]}
+      onClick={onToggle}
+    />
+  );
+};

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

@@ -1,93 +1,41 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
-import { ColorPalette } from '../../model/ContentPageDef';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { VNode } from '../../model/VNode';
-import { clamp } from '../../utils/clamp';
-import { Icon } from '../Icon/Icon';
-import { foldableBlockClassNames, useActiveHandler } from './useActiveHandler';
-
-export type FoldableBlocks = VNode[];
-export type Render = (_: VNode, isActive: boolean) => VNode;
+import type { FoldablePartProps } from './FoldablePartProps';
 
 export interface FoldableProps {
-  context: ContentPageContext;
-  foldButtonLabel?: string;
-  hiddenBlocksNum?: number;
-  blocks?: FoldableBlocks;
-  foldButtonClasses?: string;
-  foldButtonDataTheme?: ColorPalette;
-  isUnfolded?: boolean;
-  render?: Render;
-  containerClasses?: string;
-}
-
-export interface RenderBlocksParams {
-  blocksToHide: number;
-  isActive: boolean;
-  containerClasses?: string;
+  unfoldedByDefault?: boolean;
+  isFoldButtonOnTop?: boolean;
+  renderFoldableSection: (props: FoldablePartProps) => VNode;
+  renderFoldButton?: (props: FoldablePartProps) => VNode;
 }
 
 export const Foldable = JSX<FoldableProps>(
   ({
-    blocks = [],
-    hiddenBlocksNum = 0,
-    foldButtonClasses,
-    foldButtonLabel,
-    foldButtonDataTheme,
-    isUnfolded,
-    containerClasses,
-    render = (_) => _,
+    isFoldButtonOnTop = false,
+    unfoldedByDefault = false,
+    renderFoldableSection,
+    renderFoldButton,
   }) => {
-    const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
-    const { icon, handleToggle, isActive } = useActiveHandler({
-      initialState: isUnfolded,
-    });
+    const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+
+    const onToggle = useCallback(() => {
+      setIsUnfolded((_) => !_);
+    }, []);
 
-    const buttonClassName =
-      foldButtonClasses ||
-      'border-none bg-primary-main hover:bg-primary-hover focus:bg-primary-main active:bg-primary-active px-0 py-5 mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
-    const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
+    const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
+    const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
 
-    return blocks ? (
+    return isFoldButtonOnTop ? (
       <div>
-        {renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses })}
-        {hiddenBlocksNum ? (
-          <button
-            className={buttonClassName}
-            data-theme={foldButtonDataTheme}
-            onClick={handleToggle}
-          >
-            <span className="pr-3">{getFoldButtonLabel}</span>
-            {icon ? (
-              <Icon
-                className="my-auto"
-                name={icon}
-                iconVersion="white"
-                width="20"
-                height="20"
-                asSVG
-              />
-            ) : null}
-          </button>
-        ) : null}
+        {buttonNode}
+        {sectionNode}
       </div>
-    ) : null;
+    ) : (
+      <div>
+        {sectionNode}
+        {buttonNode}
+      </div>
+    );
   },
 );
-
-const renderBlocks = (
-  blocks: FoldableBlocks,
-  render: Render,
-  { blocksToHide, isActive, containerClasses = '' }: RenderBlocksParams,
-) => {
-  const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
-  const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
-
-  return render(
-    <div>
-      {visibleBlocks}
-      <div className={`${foldableBlockClassNames} ${containerClasses}`}>{hiddenBlocks}</div>
-    </div>,
-    isActive,
-  );
-};

package/src/ui-kit/Foldable/FoldablePartProps.ts

@@ -0,0 +1,4 @@
+export interface FoldablePartProps {
+  isUnfolded: boolean;
+  onToggle?: () => void;
+}

package/src/ui-kit/Foldable/FoldableSection.tsx

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface FoldableSectionProps {
+  className?: string;
+  isUnfolded?: boolean;
+}
+
+export const FoldableSection = JSX<FoldableSectionProps>(
+  ({ className = '', isUnfolded, children }) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+      if (containerRef.current) {
+        containerRef.current.style.maxHeight = isUnfolded
+          ? `${containerRef.current.scrollHeight}px`
+          : '';
+      }
+    }, [isUnfolded]);
+
+    return (
+      <div
+        ref={containerRef}
+        className={`transition-max-h duration-300 overflow-hidden max-h-0 ${className}`}
+      >
+        {children}
+      </div>
+    );
+  },
+);

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

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { IconInverseMap, IconTitleMap } from '../../icons/IconName';
 import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
@@ -15,7 +14,7 @@ export const Icon = JSX<IconProps>(
     className = '',
     imageClassName = '',
     name = '',
-    alt = `Иконка ${IconTitleMap[name] || name}`,
+    alt = `Иконка ${name}`,
     title = alt,
     iconVersion = 'normal',
     asSVG,
@@ -23,7 +22,7 @@ export const Icon = JSX<IconProps>(
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
-    if (asSVG && IconInverseMap[name]) {
+    if (asSVG) {
       return (
         <Background className={className}>
           <svg
@@ -31,7 +30,7 @@ export const Icon = JSX<IconProps>(
               getSvgSize(className, imgProps.width),
               svgUseStyleMap[iconVersion],
               imageClassName,
-              getInvertStyle(name, iconVersion),
+              getInvertStyle(iconVersion),
             ].join(' ')}
             {...imgProps}
             aria-hidden="true"
@@ -57,8 +56,8 @@ export const Icon = JSX<IconProps>(
   },
 );
 
-const getInvertStyle = (name: string, iconVersion: IconVersion) =>
-  iconVersion === 'white' && IconInverseMap[name] ? 'invert' : '';
+const getInvertStyle = (iconVersion: IconVersion): string =>
+  iconVersion === 'white' ? 'invert' : '';
 
 const getSvgSize = (className?: string, width?: string) =>
   width ? `width: ${width}px ` : 'w-full h-full';

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

@@ -20,6 +20,5 @@ export type IconProps = IconCompatibilityFields & {
   className?: string;
   imageClassName?: string;
   name?: IconName;
-  /** @hidden */
   iconVersion?: IconVersion;
 };

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

@@ -3,16 +3,4 @@ import { ImgInner } from './ImgInner';
 
 import type { Image, ImageProps } from './ImgProps';
 
-export const Img = JSX<ImageProps<Image>>(
-  ({ className = '', image, imageClassName, ...iconProps }) => {
-    return (
-      <ImgInner
-        className={className}
-        image={image}
-        imageClassName={imageClassName}
-        {...iconProps}
-        isMobile={true}
-      />
-    );
-  },
-);
+export const Img = JSX<ImageProps<Image>>((props) => <ImgInner {...props} isMobile={true} />);

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

@@ -1,17 +1 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { ImgInner } from './ImgInner';
-
-import type { Image, ImageProps } from './ImgProps';
-
-export const Img = JSX<ImageProps<Image>>(
-  ({ className = '', imageClassName, image, ...iconProps }) => {
-    return (
-      <ImgInner
-        className={className}
-        imageClassName={imageClassName}
-        image={image}
-        {...iconProps}
-      />
-    );
-  },
-);
+export { ImgInner as Img } from './ImgInner';

package/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -38,7 +38,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ context, activeTabInde
             </div>
             <div
               className={`w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${
-                hiddenTables[key] ? 'h-0' : 'h-[243px]'
+                hiddenTables[key] ? 'h-0' : ''
               }`}
             >
               <div className="relative">

package/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -46,15 +46,24 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
     0,
   );
 
+  const columnsClassName = [
+    'flex duration-1000 text-center',
+    rowIdx !== 0 ? 'font-normal' : 'font-light',
+  ].join(' ');
+
   return (
     <div
       key={String(rowIdx)}
       className="flex border-main-divider border border-t-0 border-x-0 border-solid"
     >
-      <div className="text-xl-light min-w-[214px] w-[214px] pt-6 pb-5">{headerColumn.data}</div>
+      {headerColumn?.data ? (
+        <div className={`text-xl-light w-[214px] pb-5 ${rowIdx === 0 ? 'pt-8' : 'pt-6'}`}>
+          {headerColumn.data}
+        </div>
+      ) : null}
       <div className="flex flex-grow overflow-hidden">
         <div
-          className="flex duration-1000 text-center"
+          className={columnsClassName}
           style={{
             transform: `translateX(-${transform}px)`,
           }}
@@ -75,10 +84,10 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
 };
 
 const renderCols = (cols: string[], rowIndex: number) =>
-  cols ? (
-    <div className={`flex text-xl-light ${rowIndex === 0 ? 'text-secondary-text' : ''}`}>
+  cols?.length > 0 ? (
+    <div className={`flex ${rowIndex} ${rowIndex === 0 ? 'text-secondary-text' : ''} last:mr-3`}>
       {cols.map((data, i) => (
-        <div key={String(i)} className="w-[76px] mx-8">
+        <div key={String(i)} className={`w-[76px] text-h6 mr-5 first:ml-8`}>
           {data}
         </div>
       ))}

package/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -19,7 +19,7 @@ export const TableInnerButton = JSX<TableInnerButtonProps>(
       <Button
         version="primary"
         onClick={handleClick}
-        className="w-full flex items-center justify-center rounded-none py-5 "
+        className="w-full flex items-center justify-center rounded-none py-5"
       >
         <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать ставки по вкладу'}</div>
         <Icon

package/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -13,7 +13,7 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
   ({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (
     <div className="flex justify-between w-full pt-2.5 pb-3">
       {currencies && currencies.length > 1 ? (
-        <div className="flex bg-secondary-light p-1 rounded-md">
+        <div className="flex bg-secondary-light p-1.5 rounded-md">
           {currencies.map((currency, idx) => (
             <div
               key={currency}
@@ -31,9 +31,10 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
         <Button
           href={linkToPDF}
           version="secondary"
-          className="flex justify-center items-center text-l-light text-primary-main px-8"
+          className="flex justify-center items-center text-l-light text-primary-main px-8 max-h-14"
+          target="_blank"
         >
-          <Img image="DocDownloadIcon" className="mr-[10px]" width="24" height="24" asSVG />
+          <Img image="DocDownloadIcon" className="mr-2.5" width="20" height="20" asSVG />
           <span>Скачать в PDF</span>
         </Button>
       ) : null}

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

@@ -11,8 +11,10 @@ export const Input = JSX<InputProps>(
     type = 'text',
     label,
     value = '',
+    valid = true,
     children,
     onChange,
+    onBlur,
     ...inputProps
   }) => {
     const handleChange = useCallback(
@@ -23,19 +25,33 @@ export const Input = JSX<InputProps>(
       [onChange],
     );
 
+    const handleBlur = useCallback(
+      (e) => {
+        if (!onBlur) {
+          return;
+        }
+        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
+        onBlur(validInputValue);
+      },
+      [onBlur],
+    );
+
     const paddingStyle = children ? 'pr-8' : '';
+    const validStyle = valid
+      ? 'border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+      : 'border-error';
 
     return (
       <div className={`relative ${className}`}>
         {label ? <label className="block text-m-light mb-2">{label}</label> : null}
         <input
-          className={`w-full border rounded-md border-main-stroke hover:border-primary-hover active:border-primary-text
-          focus:border-primary-text text-primary-text outline-none p-4 ${paddingStyle} ${inputClassName}`}
+          className={`w-full border rounded-md text-primary-text outline-none p-4 ${paddingStyle} ${validStyle} ${inputClassName}`}
           id={id}
           name={name || id}
           type={type}
           value={value}
           onChange={handleChange}
+          onBlur={handleBlur}
           {...inputProps}
         />
         {children}

package/src/ui-kit/Input/InputProps.ts

@@ -12,4 +12,6 @@ export type InputProps = LabelProps & {
   pattern?: string;
   value?: string;
   onChange: (value: string) => void;
+  onBlur?: (value: string) => void;
+  valid?: boolean;
 };

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { clamp } from '../../utils/clamp';
+import { getSanitizedValue } from '../../utils/getSanitizedValue';
 import type { InputRangeProps } from './InputRangeProps';
 
 const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
@@ -17,14 +18,12 @@ export const InputRange = JSX<InputRangeProps>(
     disabled = false,
     onChange,
   }) => {
-    const getSanitizedValue = (_: string) => Number(_.replace(/\D/g, ''));
-
     const handleChange = (e) => {
       if (!onChange) {
         return;
       }
 
-      onChange(clamp(getSanitizedValue(e.target.value as string), min, max));
+      onChange(clamp(Number(getSanitizedValue(e.target.value as string)), min, max));
     };
 
     const inputStyle = {