@redneckz/wildless-cms-uni-blocks 0.14.44 → 0.14.45

package/mobile/src/components/LinkDocs/LinkDocItem.tsx

@@ -8,7 +8,7 @@ export interface LinkDocItemProps extends LinkDoc {
 }
 
 export const LinkDocItem = JSX<LinkDocItemProps>(
-  ({ icon, text, fileFormat, fileSize, ...linkProps }) => {
+  ({ icon, text, href, target, fileFormat, fileSize }) => {
     const prefix = fileFormat || fileSize ? ',' : '';
     const size = fileSize ?? '';
     const format = fileFormat ? String(fileFormat) : '';
@@ -17,15 +17,14 @@ export const LinkDocItem = JSX<LinkDocItemProps>(
       <a
         className="flex box-border gap-s group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
         role="link"
-        {...linkProps}
+        href={href}
+        target={target}
       >
         {icon}
         {text ? (
           <Text size="text-l" font="font-light">
             {text}
-            <Text color="text-secondary-text">
-              {linkProps?.href && `${size} ${prefix} ${format}`}
-            </Text>
+            <Text color="text-secondary-text">{href && `${size} ${prefix} ${format}`}</Text>
           </Text>
         ) : null}
       </a>

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

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type SVGPathOptions } from '../SVG';
 
 export interface LikeButtonProps {
   className?: string;
@@ -19,25 +18,27 @@ export const LikeButton = JSX<LikeButtonProps>(({ className, onClick, ariaLabel
 ));
 
 const renderLikeIcon = () => {
-  const params = {
-    stroke: '#292D32',
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    strokeWidth: '1.5',
-  } as SVGPathOptions;
+  const handPath =
+    'M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1' +
+    ' 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77';
+  const cuffPath =
+    'M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z';
 
   return (
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <path
-        {...params}
-        strokeMiterlimit="10"
-        /* eslint-disable max-len */
-        d="M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77"
-      />
-      <path
-        {...params}
-        d="M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z"
-      />
+      {renderLinkIconPath(handPath)}
+      {renderLinkIconPath(cuffPath)}
     </svg>
   );
 };
+
+const renderLinkIconPath = (d: string) => (
+  <path
+    stroke="#292D32"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    strokeMiterlimit="10"
+    d={d}
+  />
+);

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

@@ -25,7 +25,8 @@ export const ImgAsPicture = JSX<ImageProps>(
                   srcSet={adjustSrc(router, pathPrefix)(src)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
-                  {...image.size}
+                  width={image.size?.width}
+                  height={image.size?.height}
                 />
               ))
           : null}
@@ -47,7 +48,8 @@ const renderImg = (image: Picture, imageClassName = '') => (
       width: image.size?.width ? `${image.size?.width}px` : '100%',
       height: image.size?.height ? `${image.size?.height}px` : 'auto',
     }}
-    {...image.size}
+    width={image.size?.width}
+    height={image.size?.height}
   />
 );
 

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

@@ -32,9 +32,22 @@ export const SVG = JSX<SVGProps>(
         width={width}
         height={height}
       >
-        {paths.map(({ d, fill: pathFill, ...options }, i) => (
-          <path key={i} d={d} fill={pathFill || 'currentColor'} {...commonOptions} {...options} />
-        ))}
+        {paths.map(({ d, fill: pathFill, ...options }, i) => {
+          const resultOptions = { ...commonOptions, ...options };
+
+          return (
+            <path
+              key={i}
+              d={d}
+              fill={pathFill || 'currentColor'}
+              stroke={resultOptions.stroke}
+              strokeLinecap={resultOptions.strokeLinecap}
+              strokeLinejoin={resultOptions.strokeLinejoin}
+              strokeWidth={resultOptions.strokeWidth}
+              strokeMiterlimit={resultOptions.strokeMiterlimit}
+            />
+          );
+        })}
       </svg>
     );
   },

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

@@ -53,7 +53,7 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
           version ? 'group' : '',
           className,
         )}
-        {...(version ? { 'data-ver': version } : {})}
+        data-ver={version}
       >
         {new Array(dotCount).fill(null).map((_, idx: number) => (
           <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.44",
+  "version": "0.14.45",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/CardTransfer/CardTransfer.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import { useLink } from '../../hooks/useLink';
 import { type UniBlockProps } from '../../model/JSXBlock';
@@ -21,7 +22,6 @@ const FORM_URL_MAP = {
 
 const INITIAL_FORM_STATE = {
   amount: 1500,
-  _amount: 1500,
 };
 
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
@@ -36,15 +36,19 @@ export const CardTransfer = JSX<CardTransferProps>(
     formType = 'private',
     ...rest
   }) => {
-    const [{ amount, _amount }, { field }] = useForm(INITIAL_FORM_STATE);
+    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+    const [isDisabled, setDisabled] = useState(false);
 
-    const isDisabled = amount <= 0;
+    useEffect(() => {
+      setDisabled(amount <= 0);
+    }, [amount]);
 
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
       : getRegularButtonClasses({ className: 'text-white', version: button?.version });
 
     const link = useLink();
+    const { onClick } = link(button || {});
 
     return (
       <BlockWrapper
@@ -61,19 +65,18 @@ export const CardTransfer = JSX<CardTransferProps>(
         ) : null}
         <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL_MAP[formType]}>
           <CurrencyInput
-            name="_amount"
             valid={!isDisabled}
             placeholder={placeholder}
             label={label}
-            {...field('_amount', { parse: Number, format: String })}
+            {...field('amount', { parse: Number, format: String })}
           />
-          <input type="hidden" name="amount" value={_amount} />
+          <input type="hidden" name="amount" value={amount} />
           {button?.text ? (
             <button
               type="submit"
               className={style('w-full p-m mt-lg', buttonStyle)}
               disabled={isDisabled}
-              {...link(button)}
+              onClick={onClick}
             >
               {button.text}
             </button>

package/src/components/CarouselLinks/CarouselLinkButton.tsx

@@ -15,9 +15,9 @@ export type CarouselLinkButtonProps = LinkProps & {
 };
 
 export const CarouselLinkButton = JSX<CarouselLinkButtonProps>(
-  ({ text, href = '', target = '', className = '' }) => {
+  ({ className = '', ...linkProps }) => {
     const link = useLink();
-    const adjustedProps = link({ href, target });
+    const { text, href, target, onClick } = link(linkProps);
 
     return text ? (
       <div
@@ -33,7 +33,9 @@ export const CarouselLinkButton = JSX<CarouselLinkButtonProps>(
               'sm:rounded-md rounded-none w-full px-xl py-lg whitespace-nowrap z-10',
             )}
             role="link"
-            {...adjustedProps}
+            href={href}
+            target={target}
+            onClick={onClick}
           >
             <Text size="text-l" font="font-light" color="text-primary-text">
               {text}

package/src/components/Header/DropdownMenu.tsx

@@ -48,15 +48,18 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
       >
         {items?.map((item, i) => {
           const { text, ...linkProps } = item;
+          const { href, target, onClick } = link(linkProps);
 
           return (
             <a
-              key={item.href || String(i)}
+              key={href || String(i)}
               className={style(
                 'text-l font-light pb-m hover:text-primary-main',
                 item === activeItem ? 'text-primary-main' : '',
               )}
-              {...link(linkProps)}
+              href={href}
+              target={target}
+              onClick={onClick}
             >
               {text}
             </a>

package/src/components/LinkDocs/LinkDocItem.tsx

@@ -8,7 +8,7 @@ export interface LinkDocItemProps extends LinkDoc {
 }
 
 export const LinkDocItem = JSX<LinkDocItemProps>(
-  ({ icon, text, fileFormat, fileSize, ...linkProps }) => {
+  ({ icon, text, href, target, fileFormat, fileSize }) => {
     const prefix = fileFormat || fileSize ? ',' : '';
     const size = fileSize ?? '';
     const format = fileFormat ? String(fileFormat) : '';
@@ -17,15 +17,14 @@ export const LinkDocItem = JSX<LinkDocItemProps>(
       <a
         className="flex box-border gap-s group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
         role="link"
-        {...linkProps}
+        href={href}
+        target={target}
       >
         {icon}
         {text ? (
           <Text size="text-l" font="font-light">
             {text}
-            <Text color="text-secondary-text">
-              {linkProps?.href && `${size} ${prefix} ${format}`}
-            </Text>
+            <Text color="text-secondary-text">{href && `${size} ${prefix} ${format}`}</Text>
           </Text>
         ) : null}
       </a>

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

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type SVGPathOptions } from '../SVG';
 
 export interface LikeButtonProps {
   className?: string;
@@ -19,25 +18,27 @@ export const LikeButton = JSX<LikeButtonProps>(({ className, onClick, ariaLabel
 ));
 
 const renderLikeIcon = () => {
-  const params = {
-    stroke: '#292D32',
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    strokeWidth: '1.5',
-  } as SVGPathOptions;
+  const handPath =
+    'M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1' +
+    ' 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77';
+  const cuffPath =
+    'M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z';
 
   return (
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <path
-        {...params}
-        strokeMiterlimit="10"
-        /* eslint-disable max-len */
-        d="M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77"
-      />
-      <path
-        {...params}
-        d="M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z"
-      />
+      {renderLinkIconPath(handPath)}
+      {renderLinkIconPath(cuffPath)}
     </svg>
   );
 };
+
+const renderLinkIconPath = (d: string) => (
+  <path
+    stroke="#292D32"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    strokeMiterlimit="10"
+    d={d}
+  />
+);

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

@@ -25,7 +25,8 @@ export const ImgAsPicture = JSX<ImageProps>(
                   srcSet={adjustSrc(router, pathPrefix)(src)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
-                  {...image.size}
+                  width={image.size?.width}
+                  height={image.size?.height}
                 />
               ))
           : null}
@@ -47,7 +48,8 @@ const renderImg = (image: Picture, imageClassName = '') => (
       width: image.size?.width ? `${image.size?.width}px` : '100%',
       height: image.size?.height ? `${image.size?.height}px` : 'auto',
     }}
-    {...image.size}
+    width={image.size?.width}
+    height={image.size?.height}
   />
 );
 

package/src/ui-kit/SVG.tsx

@@ -32,9 +32,22 @@ export const SVG = JSX<SVGProps>(
         width={width}
         height={height}
       >
-        {paths.map(({ d, fill: pathFill, ...options }, i) => (
-          <path key={i} d={d} fill={pathFill || 'currentColor'} {...commonOptions} {...options} />
-        ))}
+        {paths.map(({ d, fill: pathFill, ...options }, i) => {
+          const resultOptions = { ...commonOptions, ...options };
+
+          return (
+            <path
+              key={i}
+              d={d}
+              fill={pathFill || 'currentColor'}
+              stroke={resultOptions.stroke}
+              strokeLinecap={resultOptions.strokeLinecap}
+              strokeLinejoin={resultOptions.strokeLinejoin}
+              strokeWidth={resultOptions.strokeWidth}
+              strokeMiterlimit={resultOptions.strokeMiterlimit}
+            />
+          );
+        })}
       </svg>
     );
   },

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

@@ -53,7 +53,7 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
           version ? 'group' : '',
           className,
         )}
-        {...(version ? { 'data-ver': version } : {})}
+        data-ver={version}
       >
         {new Array(dotCount).fill(null).map((_, idx: number) => (
           <div