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

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,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/DefaultButton.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../Img/Img';
+import { FoldButtonProps } from './FoldButtonProps';
+
+export const DefaultButton = JSX<FoldButtonProps>(({ icon, label, dataTheme = '', onClick }) => {
+  return (
+    <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"
+      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>
+  );
+});

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

@@ -0,0 +1,13 @@
+import { ColorPalette } from '../../model/ContentPageDef';
+import { Picture } from '../../model/Picture';
+import { IconName } from '../Icon/IconProps';
+
+export interface FoldButtonProps {
+  className?: string;
+  hasContent?: boolean;
+  primaryIcon?: Picture;
+  icon: IconName;
+  label: string;
+  onClick: (e: any) => void;
+  dataTheme?: ColorPalette;
+}

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

@@ -1,93 +1,89 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
-import { ColorPalette } from '../../model/ContentPageDef';
+import { useRef, 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 { IconName } from '../Icon/IconProps';
+import { DefaultButton } from './DefaultButton';
 
+interface RenderFoldButtonProps {
+  isUnfolded: boolean;
+  onToggle: () => void;
+}
 export interface FoldableProps {
-  context: ContentPageContext;
-  foldButtonLabel?: string;
+  blocks?: VNode[];
   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;
+  containerClassName?: string;
+  blockWrapper?: (children: VNode) => VNode;
+  renderFoldButton?: (props: RenderFoldButtonProps) => VNode;
 }
 
 export const Foldable = JSX<FoldableProps>(
   ({
     blocks = [],
     hiddenBlocksNum = 0,
-    foldButtonClasses,
-    foldButtonLabel,
-    foldButtonDataTheme,
-    isUnfolded,
-    containerClasses,
-    render = (_) => _,
+    isFoldButtonOnTop = false,
+    unfoldedByDefault = false,
+    containerClassName = '',
+    blockWrapper = (_) => _,
+    renderFoldButton = renderDefaultFoldButton,
   }) => {
-    const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
-    const { icon, handleToggle, isActive } = useActiveHandler({
-      initialState: isUnfolded,
-    });
+    const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+    const blocksToHide = clamp(hiddenBlocksNum, 0, blocks?.length);
+    const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
+    const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    const onToggle = () => {
+      setIsUnfolded(!isUnfolded);
+      if (containerRef.current) {
+        containerRef.current.style.maxHeight = isUnfolded
+          ? ''
+          : `${containerRef.current.scrollHeight}px`;
+      }
+    };
 
-    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 buttonNode = hiddenBlocksNum ? renderFoldButton({ isUnfolded, onToggle }) : null;
+    const blocksNode = blockWrapper(
+      <div>
+        {visibleBlocks}
+        <div
+          ref={containerRef}
+          className={`transition-max-h duration-300 overflow-hidden max-h-0 ${containerClassName}`}
+        >
+          {hiddenBlocks}
+        </div>
+      </div>,
+    );
 
-    return blocks ? (
+    return (
       <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}
+        {isFoldButtonOnTop ? (
+          <div>
+            {buttonNode}
+            {blocksNode}
+          </div>
+        ) : (
+          <div>
+            {blocksNode}
+            {buttonNode}
+          </div>
+        )}
       </div>
-    ) : null;
+    );
   },
 );
 
-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) : [];
+const renderDefaultFoldButton = (props: RenderFoldButtonProps) => {
+  const labels = ['Развернуть', 'Скрыть'];
+  const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
-  return render(
-    <div>
-      {visibleBlocks}
-      <div className={`${foldableBlockClassNames} ${containerClasses}`}>{hiddenBlocks}</div>
-    </div>,
-    isActive,
+  return (
+    <DefaultButton
+      icon={icons[Number(props.isUnfolded)]}
+      label={labels[Number(props.isUnfolded)]}
+      onClick={props.onToggle}
+    />
   );
 };

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">