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

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

@@ -1,31 +1,97 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../Icon/Icon';
+import { useState, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface OptionProps {
+  key: string;
+  text: string;
+}
 
 export interface SelectProps {
   className?: string;
-  id?: string;
-  name?: string;
-  value: string;
-  onChange: (value: string) => void;
+  label?: string;
+  value?: OptionProps;
+  onChange: (value: OptionProps) => void;
+  options: OptionProps[];
+  isBorder?: boolean;
+  placeholder?: string;
 }
 
-const selectStyle = {
-  background: `url('/icons/ArrowDownIcon.svg') right 16px top 50% / 21px no-repeat`,
-};
-
 export const Select = JSX<SelectProps>(
-  ({ className = '', id, name, children, value, onChange }) => {
+  ({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
+    const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
+    const [isOpen, setIsOpen] = useState(false);
+
+    const choiceOption = (option: OptionProps) => {
+      setSelectedItem(option);
+      setIsOpen(false);
+      onChange(option);
+    };
+
+    const isSelected = (option) => Boolean(option.key === selectedItem.key);
+
+    useEffect(() => {
+      setSelectedItem(value || { key: '', text: '' });
+    }, [value]);
+
     return (
-      <select
-        className={`appearance-none pl-0.5 ${className}`}
-        style={selectStyle}
-        id={id}
-        name={name || id}
-        value={value}
-        onChange={(e) => onChange(e.target.value as string)}
-        placeholder=""
-      >
-        {children}
-      </select>
+      <div className={`${className}`}>
+        {label ? <span className="mb-2 flex">{label}</span> : null}
+        <div className={`relative ${isOpen ? 'z-20' : 'z-10'}`}>
+          <div
+            className={`text-m-light flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
+            ${getBorderStyle(isBorder)}`}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <p className="p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap">
+              {selectedItem?.text || placeholder}
+            </p>
+            <Icon
+              name="ArrowUpIcon"
+              width="16"
+              height="16"
+              className={`absolute right-3 ${isOpen ? '' : 'rotate-180'}`}
+            />
+          </div>
+          {options?.length ? (
+            <div className={`h-0 ${renderOptionsStyle(isOpen)}`}>
+              <div
+                className={`bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
+              >
+                {options.map(renderOption(choiceOption, isOpen, isSelected))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
     );
   },
 );
+
+const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
+
+const renderOption =
+  (choiceOption, isOpen: boolean, isSelected) => (option: OptionProps, i: number) => {
+    return (
+      <div
+        key={String(i)}
+        onClick={() => {
+          choiceOption(option);
+        }}
+        className="flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative"
+      >
+        <span className="min-h-6">{option.text}</span>
+        <Icon
+          name="DoneSimpleIcon"
+          width="16"
+          height="16"
+          className={['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(
+            ' ',
+          )}
+        />
+      </div>
+    );
+  };
+
+const getBorderStyle = (isBorder) =>
+  isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';

package/mobile/src/utils/changeHashOnObserve.ts

@@ -1,10 +1,30 @@
-export const changeHashOnObserve = (entries: IntersectionObserverEntry[]) => {
-  if (!entries.length) {
-    return;
-  }
-  const [entry] = entries;
-
-  if (entry.isIntersecting) {
-    // Here must be logic for block intersection event
-  }
-};
+import { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
+import { EventBus } from '../EventBus/EventBus';
+
+interface ChangeHashOnObserveProps {
+  anchor?: string;
+  anchorClickRef?: {
+    current: AnchorClickScrollingEvent | null;
+  };
+}
+
+export const changeHashOnObserve =
+  ({ anchor, anchorClickRef }: ChangeHashOnObserveProps) =>
+  (entries: IntersectionObserverEntry[]) => {
+    if (!entries?.length) {
+      return;
+    }
+
+    const [entry] = entries;
+
+    if (!entry.isIntersecting || entry.boundingClientRect.top > 150) {
+      return;
+    }
+
+    if (anchorClickRef?.current?.isScrolling && anchorClickRef.current.label === `#${anchor}`) {
+      EventBus.inst.fire('anchorClick', { isScrolling: false, label: undefined });
+      EventBus.inst.fire('tab', { type: 'link', label: anchor });
+    } else if (!anchorClickRef?.current?.isScrolling) {
+      EventBus.inst.fire('tab', { type: 'link', label: anchor });
+    }
+  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -66,7 +66,8 @@
     "mobile/src",
     "src",
     "cosmos-static/icons",
-    "tailwind.config.cjs"
+    "tailwind.config.cjs",
+    "!**/*.spec.*"
   ],
   "repository": {
     "url": "https://github.com/redneckz/wildless-cms-uni-blocks.git"
@@ -94,7 +95,9 @@
     "size": "size-limit",
     "lint": "eslint ./src",
     "pretest": "npm run prepare && npm run lint",
-    "test": "jest --coverage",
+    "test": "npm run test:src && npm run test:bin",
+    "test:update": "npm run test:src -- -u && npm run test:bin -- -u",
+    "test:src": "jest --coverage",
     "test:bin": "jest --config ./jest.config.bin.js",
     "cosmos": "cosmos",
     "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",

package/src/EventBus/EventMap.ts

@@ -1,6 +1,8 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
+import type { AnchorClickScrollingEvent, TabActivationEvent } from '../components/Tabs/Tabs';
 import type { TariffsTableInnerEvent } from '../ui-kit/InnerTable/InnerTableProps';
+
 export interface EventMap {
   tab: TabActivationEvent;
   tariffInnerTable: TariffsTableInnerEvent;
+  anchorClick: AnchorClickScrollingEvent;
 }

package/src/components/Accordion/Accordion.ui.json

@@ -0,0 +1,79 @@
+{
+  "content": {
+    "accordionItems": {
+      "items": {
+        "blocks": {
+          "items": {
+            "blockListType": {
+              "ui:widget": "hidden"
+            },
+            "image": {
+              "ui:field": "picture"
+            },
+            "benefitList": {
+              "items": {
+                "description": {
+                  "benefitType": {
+                    "ui:widget": "hidden"
+                  }
+                },
+                "icon": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "style": {
+              "ui:field": "style"
+            },
+            "benefits": {
+              "items": {
+                "icon": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "buttons": {
+              "items": {
+                "icon": {
+                  "ui:field": "icon"
+                },
+                "iconRight": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "icon": {
+              "ui:field": "icon"
+            },
+            "backwardButton": {
+              "icon": {
+                "ui:field": "icon"
+              },
+              "iconRight": {
+                "ui:field": "icon"
+              }
+            },
+            "cards": {
+              "items": {
+                "image": {
+                  "ui:field": "picture"
+                },
+                "button": {
+                  "icon": {
+                    "ui:field": "icon"
+                  },
+                  "iconRight": {
+                    "ui:field": "icon"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "labelIcon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/BenefitsBlock/BenefitsBlock.ui.json

@@ -0,0 +1,16 @@
+{
+  "content": {
+    "benefitList": {
+      "items": {
+        "description": {
+          "benefitType": {
+            "ui:widget": "hidden"
+          }
+        },
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

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

@@ -5,8 +5,11 @@
     {
       "title": "Плитка 1",
       "description": "Описание плитки 1",
-      "bonusCount": 1,
-      "bonusName": "балл"
+      "bonusItemContent": {
+        "bonusType": "count",
+        "bonusCount": "1",
+        "bonusName": "балл"
+      }
     }
   ]
 }

package/src/components/Bonus/Bonus.fixture.tsx

@@ -1,7 +1,29 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Bonus } from './Bonus';
 import type { BonusContent } from './BonusContent';
 
+const imageSize = {
+  height: 242,
+  width: 242,
+};
+
+const cardWithMoney: Picture = {
+  src: 'card-with-diamond.png',
+  alt: 'Кредиты в РСХБ',
+  format: 'webp',
+  size: imageSize,
+};
+
+const buttons: ButtonProps[] = [
+  {
+    text: 'Установить',
+    href: '/credit-cards',
+    version: 'secondary',
+  },
+];
+
 export const BONUS: BonusContent = {
   title: 'Начисление баллов',
   description:
@@ -12,21 +34,30 @@ export const BONUS: BonusContent = {
       title: '5 баллов за каждые 100 ₽',
       description:
         'Повышенное начисление баллов за операции оплаты товаров и услуг в сети АЗС Роснефть',
-      bonusCount: '5',
-      bonusName: 'баллов',
+      bonusItemContent: {
+        bonusType: 'count',
+        bonusCount: '5',
+        bonusName: 'баллов',
+      },
     },
     {
       title: '1 балл за каждые 100 ₽',
       description: 'За остальные операции оплаты товаров и услуг',
-      bonusCount: '1',
-      bonusName: 'балл',
+      bonusItemContent: {
+        bonusType: 'count',
+        bonusCount: '1',
+        bonusName: 'балл',
+      },
     },
     {
       title: '300 приветственных баллов',
       description:
         'За операции оплаты товаров и услуг на общую сумму 1 000 рублей и более в течение первых двух месяцев после получения карты',
-      bonusCount: '300',
-      bonusName: 'баллов',
+      bonusItemContent: {
+        bonusType: 'image',
+        image: cardWithMoney,
+      },
+      buttons,
     },
   ],
 };

package/src/components/Bonus/Bonus.tsx

@@ -1,8 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
-import type { BonusContent } from './BonusContent';
+import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
 
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
@@ -25,28 +27,26 @@ export const Bonus = JSX<BonusProps>((props) => {
           align="center"
         />
         <div className="flex flex-wrap w-full mt-9">
-          {bonusItems
+          {bonusItems?.length
             ? bonusItems.map((_, i) => {
                 return (
                   <div
                     key={String(i)}
-                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0"
+                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
                   >
                     <div className="flex justify-between w-full">
-                      <div className="mr-4">
-                        <div className="text-h4">{_.title}</div>
-                        <div className="text-xl-light mt-[14px] max-w-[488px]">{_.description}</div>
-                      </div>
-                      {_.bonusCount ? (
-                        <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
-                          <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
-                            {_.bonusCount}
-                          </span>
-                          <span className="text-h2 bg-clip-text text-transparent bg-green-to-yellow">
-                            {_.bonusName}
-                          </span>
+                      <div className="flex flex-col justify-between mr-4">
+                        <div>
+                          <div className="text-h4">{_.title}</div>
+                          <div className="text-xl-light mt-2 max-w-[488px]">{_.description}</div>
                         </div>
-                      ) : null}
+                        {_?.buttons?.length ? (
+                          <ButtonSection context={context} buttons={_?.buttons} />
+                        ) : null}
+                      </div>
+                      {_.bonusItemContent?.bonusType
+                        ? renderBonusItemContent(_.bonusItemContent)
+                        : null}
                     </div>
                   </div>
                 );
@@ -57,3 +57,31 @@ export const Bonus = JSX<BonusProps>((props) => {
     </BlockWrapper>
   );
 });
+
+const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) => (
+  <div>
+    {bonusItemContent.bonusType === 'count'
+      ? renderBonusCount(bonusItemContent as BonusCountDef)
+      : renderBonusImage(bonusItemContent as BonusImageDef)}
+  </div>
+);
+
+const renderBonusCount = (_: BonusCountDef) => (
+  <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
+    {_.bonusCount ? (
+      <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
+        {_.bonusCount}
+      </span>
+    ) : null}
+    {_.bonusName ? (
+      <span className="text-h2 bg-clip-text text-transparent bg-green-to-yellow">
+        {_.bonusName}
+      </span>
+    ) : null}
+  </div>
+);
+
+const renderBonusImage = (_: BonusImageDef) =>
+  _.image ? (
+    <Img className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full`} image={_.image} />
+  ) : null;

package/src/components/Bonus/Bonus.ui.json

@@ -0,0 +1,16 @@
+{
+  "content": {
+    "bonusItems": {
+      "items": {
+        "bonusItemContent": {
+          "bonusType": {
+            "ui:widget": "hidden"
+          },
+          "image": {
+            "ui:field": "icon"
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Bonus/BonusContent.ts

@@ -1,15 +1,46 @@
+import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
- * @title Плитка
+ * @title Изображение
  */
-export type BonusItem = HeadlineCommonProps & {
+export type BonusImageDef = {
+  /** @default image */
+  bonusType?: 'image';
+  image?: Picture;
+};
+
+/**
+ * @title Баллы
+ */
+export type BonusCountDef = {
+  /** @default count */
+  bonusType?: 'count';
   /** @title Количество баллов */
   bonusCount?: string;
   /** @title Наименование */
   bonusName?: string;
 };
 
+/**
+ * @title Вид контента
+ */
+export type BonusItemContentDef = EmptyOption | BonusImageDef | BonusCountDef;
+
+/**
+ * @title Плитка
+ */
+export type BonusItem = HeadlineCommonProps & {
+  bonusItemContent?: BonusItemContentDef;
+  /**
+   * @title Кнопка
+   * @maxItems 1
+   */
+  buttons?: ButtonWithIconProps[];
+};
+
 /**
  * @title Блок Бонусы
  */

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -10,7 +10,7 @@
           "width": 160,
           "height": 180
         },
-        "icon": "WateringCan"
+        "icon": "WateringCanIcon"
       }
     },
     {

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "bonusBenefits": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/Calculator/Calculator.example.json

@@ -14,7 +14,8 @@
             "text": "Кнопка 1",
             "version": "primary"
           }
-        ]
+        ],
+        "footnote": "Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка. "
       }
     }
   ]

package/src/components/Calculator/Calculator.ui.json

@@ -0,0 +1,31 @@
+{
+  "content": {
+    "calculatorTabs": {
+      "items": {
+        "nav": {
+          "icon": {
+            "ui:field": "icon"
+          }
+        },
+        "calculatorBlock": {
+          "sourceBookDir": {
+            "ui:widget": "sourceBook"
+          },
+          "calcType": {
+            "ui:widget": "hidden"
+          },
+          "buttons": {
+            "items": {
+              "icon": {
+                "ui:field": "icon"
+              },
+              "iconRight": {
+                "ui:field": "icon"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/CardTransfer/CardTransfer.example.json

@@ -1,6 +1,11 @@
 {
   "title": "Укажите сумму перевода",
   "label": "Сумма перевода",
-  "buttonText": "Далее",
-  "placeholder": "1500"
+  "placeholder": "1500",
+  "button": {
+    "href": "",
+    "text": "Далее",
+    "target": "_blank",
+    "version": "primary"
+  }
 }

package/src/components/CardTransfer/CardTransfer.fixture.tsx

@@ -1,6 +1,14 @@
 import { context } from '../../react/setup-fixture';
 import { CardTransfer } from './CardTransfer';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+const button: ButtonProps = {
+  href: '',
+  text: 'Далее',
+  target: '_blank',
+  version: 'primary',
+};
 
 export default {
-  default: <CardTransfer context={context} />,
+  default: <CardTransfer context={context} button={button} />,
 };