@redneckz/wildless-cms-uni-blocks 0.6.22 → 0.6.24

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { Icon } from '../Icon/Icon';
 
@@ -23,9 +23,8 @@ export const Select = JSX<SelectProps>(
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
 
-    const wrapperRef = useRef<HTMLInputElement | null>(null);
-
-    useOutsideClick(wrapperRef, setIsOpen);
+    const handleClickOutside = useCallback(() => setIsOpen(false), []);
+    const wrapperRef = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
     const choiceOption = (option: OptionProps) => {
       setSelectedItem(option);

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

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TagsContent } from './TagsContent';
+
+export interface TagsProps extends TagsContent {
+  /** @hidden */
+  className?: string;
+}
+
+export const Tags = JSX<TagsProps>((props) => {
+  const { tags, className = '' } = props;
+
+  return tags?.length ? (
+    <div className={`flex flex-wrap gap-2 ${className}`}>
+      {tags.map((_, i) => renderTag(_, String(i)))}
+    </div>
+  ) : null;
+});
+
+const renderTag = (tag: string, key: string) => (
+  <span
+    key={key}
+    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke"
+  >
+    {tag}
+  </span>
+);

package/mobile/src/ui-kit/Tags/TagsContent.ts

@@ -0,0 +1,6 @@
+export interface TagsContent {
+  /**
+   * @title Теги
+   */
+  tags?: string[];
+}

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

@@ -10,9 +10,9 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   ariaLabel?: string;
-  onClick?: () => void;
   bgColor?: BgColorVersion;
   dataItemName?: string;
+  onClick?: () => void;
 }
 
 const TEXT_CLASSES = 'font-sans text-s-light';

package/mobile/src/utils/getIconWithVersion.ts

@@ -0,0 +1,7 @@
+import type { Picture } from '../model/Picture';
+import type { BlockVersion } from '../model/BlockVersion';
+
+export const getIconWithVersion = (icon: Picture, version: BlockVersion = 'primary'): Picture => ({
+  ...icon,
+  iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.22",
+  "version": "0.6.24",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -128,6 +128,8 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.19.4",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -183,7 +185,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "39 kB",
+      "limit": "41 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],
@@ -195,6 +197,24 @@
       "prettier --write"
     ]
   },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ],
+    "rules": {
+      "type-empty": [
+        0
+      ],
+      "subject-empty": [
+        0
+      ],
+      "header-min-length": [
+        2,
+        "always",
+        12
+      ]
+    }
+  },
   "peerDependenciesMeta": {
     "react": {
       "optional": true

package/src/components/Accordion/Accordion.example.json

@@ -1,4 +1,54 @@
 {
-  "title": "Аккордеон",
-  "accordionAlignTitle": "center"
+  "content": {
+    "title": "Аккордеон",
+    "accordionAlignTitle": "center"
+  },
+  "blocks": [
+    {
+      "type": "AccordionItem",
+      "content": {
+        "label": "Аккордеон 1",
+        "isExpanded": true,
+        "labelIcon": {
+          "icon": "CardIcon"
+        }
+      },
+      "blocks": [
+        {
+          "type": "Bonus",
+          "content": {
+            "title": "Начисление баллов",
+            "description": "Описание",
+            "bonusItems": [
+              {
+                "title": "Плитка 1",
+                "description": "Описание плитки 1"
+              }
+            ]
+          },
+          "style": ["col-span-12"]
+        }
+      ]
+    },
+    {
+      "type": "AccordionItem",
+      "content": {
+        "label": "Аккордеон 2",
+        "isExpanded": false,
+        "labelIcon": {
+          "icon": "CardIcon"
+        }
+      }
+    },
+    {
+      "type": "AccordionItem",
+      "content": {
+        "label": "Аккордеон 3",
+        "isExpanded": false,
+        "labelIcon": {
+          "icon": "CardIcon"
+        }
+      }
+    }
+  ]
 }

package/src/components/AccordionItem/AccordionItem.example.json

@@ -1,7 +1,25 @@
 {
-  "label": "Аккордеон 1",
-  "isExpanded": true,
-  "labelIcon": {
-    "icon": "CardIcon"
-  }
+  "content": {
+    "label": "Аккордеон 1",
+    "isExpanded": true,
+    "labelIcon": {
+      "icon": "CardIcon"
+    }
+  },
+  "blocks": [
+    {
+      "type": "Bonus",
+      "content": {
+        "title": "Начисление баллов",
+        "description": "Описание",
+        "bonusItems": [
+          {
+            "title": "Плитка 1",
+            "description": "Описание плитки 1"
+          }
+        ]
+      },
+      "style": ["col-span-12"]
+    }
+  ]
 }

package/src/components/AccordionItem/AccordionItem.mobile.tsx

@@ -8,6 +8,7 @@ import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import type { AccordionContent } from '../Accordion/AccordionContent';
 import type { AccordionItemProps } from './AccordionItemProps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
@@ -64,10 +65,22 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
   >
     <span className="text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main">
       {primaryIcon ? (
-        <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+        <Img
+          image={getIconWithVersion(primaryIcon)}
+          className="mr-3 flex-shrink-0"
+          width="24"
+          height="24"
+          asSVG
+        />
       ) : null}
       {label}
     </span>
-    <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+    <Img
+      className="flex-shrink-0"
+      image={getIconWithVersion({ icon: icon })}
+      width="24"
+      height="24"
+      asSVG
+    />
   </button>
 ));

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -1,36 +1,38 @@
 {
-  "title": "Преимущества",
-  "benefitsBlockVersion": "primary",
-  "benefitList": [
-    {
-      "label": "Преимущество №1",
-      "description": {
-        "name": "Описание 1",
-        "benefitType": "description"
-      },
-      "icon": {
-        "icon": "ClockIcon",
-        "format": "webp",
-        "size": {
-          "width": 70,
-          "height": 70
+  "content": {
+    "title": "Преимущества",
+    "benefitsBlockVersion": "primary",
+    "benefitList": [
+      {
+        "label": "Преимущество №1",
+        "description": {
+          "name": "Описание 1",
+          "benefitType": "description"
+        },
+        "icon": {
+          "icon": "ClockIcon",
+          "format": "webp",
+          "size": {
+            "width": 70,
+            "height": 70
+          }
         }
-      }
-    },
-    {
-      "label": "Преимущество №2",
-      "description": {
-        "name": "Описание 2",
-        "benefitType": "description"
       },
-      "icon": {
-        "icon": "SignDocsIcon",
-        "format": "webp",
-        "size": {
-          "width": 70,
-          "height": 70
+      {
+        "label": "Преимущество №2",
+        "description": {
+          "name": "Описание 2",
+          "benefitType": "description"
+        },
+        "icon": {
+          "icon": "SignDocsIcon",
+          "format": "webp",
+          "size": {
+            "width": 70,
+            "height": 70
+          }
         }
       }
-    }
-  ]
+    ]
+  }
 }

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -61,7 +61,7 @@ export default {
             icon: image,
           },
         ]}
-        benefitsBlockVersion="primary"
+        version="primary"
       />
     </div>
   ),
@@ -105,7 +105,7 @@ export default {
             icon: { icon: 'GlobalIcon' },
           },
         ]}
-        benefitsBlockVersion="primary"
+        version="primary"
       />
     </div>
   ),
@@ -150,7 +150,7 @@ export default {
               items: itemsList,
               benefitType: 'list',
             },
-            icon: { icon: 'ActualBalanceIcon' },
+            icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
           },
         ]}
       />
@@ -197,10 +197,10 @@ export default {
               items: itemsList,
               benefitType: 'list',
             },
-            icon: { icon: 'ActualBalanceIcon' },
+            icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
           },
         ]}
-        benefitsBlockVersion="secondary"
+        version="secondary"
       />
     </div>
   ),
@@ -244,7 +244,7 @@ export default {
             icon: { icon: 'GlobalIcon', iconVersion: 'black' },
           },
         ]}
-        benefitsBlockVersion="secondary"
+        version="secondary"
       />
     </div>
   ),

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
 import { BenefitBlockItemProps, DescriptionDef } from './BenefitsBlockContent';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -31,80 +31,58 @@ const benefitsIconStyleMap = {
 };
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`}
-        {...rest}
-      >
-        {title ? (
-          <Heading
-            headingType="h3"
-            as="h2"
-            className={`max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`}
-            title={title}
-          />
-        ) : null}
-        {benefitList?.length ? renderBenefits(benefitList, benefitsBlockVersion) : null}
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', title, benefitList, version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[version]}`}
+      {...rest}
+    >
+      {title ? (
+        <Heading
+          headingType="h3"
+          as="h2"
+          className={`max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`}
+          title={title}
+        />
+      ) : null}
+      {benefitList?.length ? renderBenefits(benefitList, version) : null}
+    </BlockWrapper>
+  ),
 );
 
-const renderBenefits = (
-  benefitList: BenefitBlockItemProps[],
-  benefitsBlockVersion: BlockVersion,
-) => {
-  return (
-    <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-      {benefitList.map(renderStep(benefitsBlockVersion))}
-    </div>
-  );
-};
-
-const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
-  if (!benefitIcon.icon || benefitIcon?.iconVersion) {
-    return benefitIcon;
-  }
-  benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
-
-  return benefitIcon;
-};
+const renderBenefits = (benefitList: BenefitBlockItemProps[], version: BlockVersion) => (
+  <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
+    {benefitList.map(renderStep(version))}
+  </div>
+);
 
-const renderStep =
-  (benefitsBlockVersion: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
-    const description = (benefit?.description || undefined) as DescriptionDef;
+const renderStep = (version: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+  const description = (benefit?.description || undefined) as DescriptionDef;
 
-    return (
-      <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-        {benefit?.icon?.icon ? (
-          <Img
-            className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`}
-            image={setIconVersion(benefit.icon, benefitsBlockVersion)}
-            asSVG
-          />
+  return (
+    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
+      {benefit?.icon?.icon ? (
+        <Img
+          className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[version]}`}
+          image={getIconWithVersion(benefit.icon, version)}
+          asSVG
+        />
+      ) : null}
+      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
+      <div className="ml-5">
+        {benefit?.label ? (
+          <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[version]}`}>{benefit.label}</h3>
         ) : null}
-        {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-        <div className="ml-5">
-          {benefit?.label ? (
-            <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`}>
-              {benefit.label}
-            </h3>
-          ) : null}
-          {renderDescription(description, benefitsBlockVersion)}
-        </div>
+        {renderDescription(description, version)}
       </div>
-    );
-  };
+    </div>
+  );
+};
 
-const renderDescription = (description: DescriptionDef, benefitsBlockVersion: BlockVersion) => {
+const renderDescription = (description: DescriptionDef, version: BlockVersion) => {
   const benefitType = description ? description?.benefitType : null;
-  if (!benefitType) {
-    return null;
-  }
 
-  return description ? (
-    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`}>
+  return description && benefitType ? (
+    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`}>
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -54,5 +54,5 @@ export type BenefitsBlockContent = TitleProps & {
    */
   benefitList?: BenefitBlockItemProps[];
   /** @default primary */
-  benefitsBlockVersion?: BlockVersion;
+  version?: BlockVersion;
 };

package/src/components/Bonus/Bonus.example.json

@@ -1,10 +1,12 @@
 {
-  "title": "Начисление баллов",
-  "description": "Описание",
-  "bonusItems": [
-    {
-      "title": "Плитка 1",
-      "description": "Описание плитки 1"
-    }
-  ]
+  "content": {
+    "title": "Начисление баллов",
+    "description": "Описание",
+    "bonusItems": [
+      {
+        "title": "Плитка 1",
+        "description": "Описание плитки 1"
+      }
+    ]
+  }
 }