@redneckz/wildless-cms-uni-blocks 0.3.31 → 0.3.34

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

@@ -1,30 +1,46 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture, ImgSource } from '../../model/Picture';
+import type { ImgSource, Picture } from '../../model/Picture';
+import { Icon } from '../Icon/Icon';
+import type { Image, ImageProps } from './ImgProps';
 
-export interface ImageProps {
-  className?: string;
-  imageClassName?: string;
-  image: Picture;
-}
+export const Img = JSX<ImageProps<Image>>(
+  ({ className = '', image, imageClassName = '', ...iconProps }) => {
+    // backwards compatibility with existing icons in usage
+    const icon = typeof image === 'string' ? image : image?.icon;
+    if (icon || icon === '') {
+      return <Icon className={className} name={icon} {...iconProps} />;
+    }
 
-export const Img = JSX<ImageProps>(({ className = '', image, imageClassName }) => {
-  if (!image) {
-    return null;
-  }
+    return (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image as Picture}
+      />
+    );
+  },
+);
 
-  return (
-    <picture className={className}>
-      {image.sources?.length
-        ? image.sources.map(({ src, format }, index) => (
-            <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
-          ))
-        : null}
-      {renderImg(image, imageClassName)}
-    </picture>
-  );
-});
+export const ImgAsPicture = JSX<ImageProps<Picture>>(
+  ({ className = '', image, imageClassName = '' }) => {
+    if (!image) {
+      return null;
+    }
+
+    return (
+      <picture className={className}>
+        {image?.sources?.length
+          ? image.sources.map(({ src, format }, index) => (
+              <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
+            ))
+          : null}
+        {renderImg(image, imageClassName)}
+      </picture>
+    );
+  },
+);
 
-const renderImg = (image, imageClassName = '') => {
+const renderImg = (image: Picture, imageClassName = '') => {
   const style = {
     width: image.size?.width ? `${image.size?.width}px` : '100%',
     height: image.size?.height ? `${image.size?.height}px` : '100%',

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

@@ -1,42 +1,69 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture, ImgSource } from '../../model/Picture';
+import type { ImgSource, Picture } from '../../model/Picture';
+import { Icon } from '../Icon/Icon';
+import type { Image, ImageProps } from './ImgProps';
 
-export interface ImageProps {
-  className?: string;
-  imageClassName?: string;
-  image: Picture;
-}
+export const Img = JSX<ImageProps<Image>>(
+  ({ className = '', image, imageClassName = '', ...iconProps }) => {
+    if (!image) {
+      return null;
+    }
+
+    // backwards compatibility with existing icons in usage
+    const icon = typeof image === 'string' ? image : image.icon;
+    if (icon || icon === '') {
+      return icon.length ? <Icon className={className} name={icon} {...iconProps} /> : null;
+    }
 
-export const Img = JSX<ImageProps>(
-  ({ className = '', image: { size, ...image }, imageClassName = '' }) => {
-    const style = {
-      width: size?.width ? `${size?.width}px` : '100%',
-      height: size?.height ? `${size?.height}px` : '100%',
-    };
+    return (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image as Picture}
+      />
+    );
+  },
+);
 
-    const title = image.title || '';
-    const alt = image.alt || title;
+export const ImgAsPicture = JSX<ImageProps<Picture>>(
+  ({ className = '', image, imageClassName = '' }) => {
+    if (!image) {
+      return null;
+    }
 
     return (
       <picture className={`flex-none ${className}`}>
-        {image.sources?.length
+        {image?.sources?.length
           ? image.sources.map(({ src, format }, index) => (
               <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
             ))
           : null}
-        <img
-          className={imageClassName}
-          src={image.src}
-          alt={alt}
-          title={title}
-          style={style}
-          {...size}
-        />
+        {renderImg(image, imageClassName)}
       </picture>
     );
   },
 );
 
+const renderImg = (image: Picture, imageClassName = '') => {
+  const style = {
+    width: image.size?.width ? `${image.size?.width}px` : '100%',
+    height: image.size?.height ? `${image.size?.height}px` : '100%',
+  };
+  const title = image.title || '';
+  const alt = image.alt || image.title;
+
+  return (
+    <img
+      src={image.src}
+      className={imageClassName}
+      alt={alt}
+      title={title}
+      style={style}
+      {...image.size}
+    />
+  );
+};
+
 export function formatToMimeType(format: ImgSource['format']): string | undefined {
   return format ? `image/${String(format)}` : undefined;
 }

package/src/ui-kit/Img/ImgProps.ts

@@ -1,9 +1,12 @@
 import type { Picture } from '../../model/Picture';
+import type { IconCompatibilityFields, IconName } from '../Icon/IconProps';
 
-export interface ImageContent {
-  image?: Picture;
-}
+export type Image = Picture | IconName;
 
-export interface ImageProps extends ImageContent {
+export interface ImageContent<T = Picture> {
+  image?: T;
+}
+export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
   className?: string;
+  imageClassName?: string;
 }

package/src/ui-kit/List/ListItem.tsx

@@ -11,7 +11,7 @@ export interface ListItemProps {
   isDotted?: boolean;
 }
 
-const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
 
 const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'bg-primary-main',
@@ -22,7 +22,7 @@ const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
 export const ListItem = JSX<ListItemProps>(
   ({ className = '', isDotted = true, children, version = 'primary' }) => {
     return (
-      <div className={`font-sans flex items-start ${className}`} role="listitem">
+      <div className={`font-sans flex items-center ${className}`} role="listitem">
         {isDotted && <div className={getListStyle(version)} />}
         <span>{children}</span>
       </div>

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
@@ -8,7 +8,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className="w-[20px] h-[20px]">
-          <Icon name="LoupeIcon" width="24" height="24" />
+          <Img image="LoupeIcon" width="24" height="24" />
         </div>
         {!term && (
           <label
@@ -37,7 +37,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
           setTerm('');
         }}
       >
-        <Icon name="CloseIcon" width="24" height="24" />
+        <Img image="CloseIcon" width="24" height="24" />
       </button>
     </form>
   );

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../Button/Button';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
@@ -9,7 +9,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className="w-[24px] h-[24px]">
-          <Icon name="LoupeIcon" width="24" height="24" />
+          <Img image="LoupeIcon" width="24" height="24" />
         </div>
         {!term && (
           <label

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../types';
 import { Button } from './Button/Button';
-import { Icon } from './Icon/Icon';
+import { Img } from './Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
@@ -9,7 +9,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className="w-[20px] h-[20px]">
-          <Icon name="LoupeIcon" width="24" height="24" />
+          <Img image="LoupeIcon" width="24" height="24" />
         </div>
         {!term && (
           <label

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../Img/Img';
 import type { Tab, TabClickHandler, TabsProps } from './TabsProps';
 
 const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
@@ -41,6 +41,6 @@ const renderTab =
 
 const renderIcon = (tab: Tab, isActive: boolean) => (
   <div className="h-full mt-1" style={isActive ? { filter: 'invert(1)' } : null}>
-    <Icon className="w-5 h-5 mr-3" name={tab?.icon || 'CardIcon'} asSVG={!isActive} />
+    <Img className="w-5 h-5 mr-3" image={tab?.icon || 'CardIcon'} asSVG={!isActive} />
   </div>
 );

package/src/ui-kit/Tabs/TabsProps.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Вкладка
@@ -8,7 +8,7 @@ export interface Tab {
   title?: string;
   /** @title Описание */
   description?: string;
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export type TabClickHandler = (value: number) => void;