@redneckz/wildless-cms-uni-blocks 0.8.23 → 0.8.25

package/mobile/src/components/Header/Header.tsx

@@ -12,9 +12,8 @@ import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { AccordionItemsList } from '../Accordion/AccordionItemsList';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
+import { RollupItem } from '../RollupItem/RollupItem';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
@@ -65,13 +64,13 @@ export const Header = JSX<HeaderProps>(
             burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
-            <AccordionItemsList>
+            <div className="list-none m-0 p-0">
               {topItems?.map((item, i) => (
-                <AccordionItem key={String(i)} label={item.text}>
+                <RollupItem key={String(i)} label={item.text}>
                   <LinkList documents={item.items} />
-                </AccordionItem>
+                </RollupItem>
               ))}
-            </AccordionItemsList>
+            </div>
           </HeaderBurger>
         ) : null}
       </BlockWrapper>

package/mobile/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,14 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '../../hooks/useBool';
 import { useLocation } from '../../hooks/useLocation';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
+import type { PreventableEvent } from '../../model/PreventableEvent';
+import { projectSettings } from '../../ProjectSettings';
 import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
 import { Location } from '../../ui-kit/Location/Location';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
-import { projectSettings } from '../../ProjectSettings';
 
 interface HeaderSecondaryMenuContent {
   version?: BlockVersion;
@@ -30,6 +32,11 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
 
     const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
+    const handleShowLocationModal = useCallback((ev?: PreventableEvent) => {
+      ev?.preventDefault();
+      showLocationModal();
+    }, []);
+
     return (
       <div className={style('flex items-center', className)}>
         <TopItem
@@ -37,7 +44,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           flat={true}
           href="#"
           text={location.name}
-          onClick={showLocationModal}
+          onClick={handleShowLocationModal}
         />
         {officesLink ? (
           <TopItem className="mr-7" flat={true} href={officesLink} text="Офисы и банкоматы" />

package/mobile/src/components/Headline/Headline.tsx

@@ -18,14 +18,17 @@ export const Headline = JSX<HeadlineProps>(
     headlineVersion = 'XL',
     align = 'text-center',
     as,
+    isPadding = true,
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
+    const paddingStyle = isPadding ? 'p-12' : '';
 
     return (
       <BlockWrapper
         className={style(
-          'flex flex-col p-12 group-data-secondary:bg-primary-main group-data-secondary:text-white',
+          'flex flex-col group-data-secondary:bg-primary-main group-data-secondary:text-white',
+          paddingStyle,
           versionStyle.wrapper,
           className,
         )}

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -13,4 +13,6 @@ export type HeadlineContent = UniBlockContent &
     align?: TextAlign;
     /** @hidden */
     as?: HeadingTagType;
+  /** @title Внутренний отступ блока */
+  isPadding?: boolean;
   };

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -1,15 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconName } from '../../icons/IconName';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
+import { AccordionContent } from '../Accordion/AccordionContent';
 import type { RollupItemContent } from './RollupItemContent';
 
 export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
@@ -22,40 +27,49 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     isFoldButtonOnTop = true,
     version = 'primary',
     ...rest
-  }) => (
-    <BlockWrapper
-      className={`border-b border-solid border-main-divider w-full ${className}`}
-      tag="div"
-      {...rest}
-    >
-      <Foldable
-        isFoldButtonOnTop={isFoldButtonOnTop}
-        unfoldedByDefault={isExpanded}
-        renderFoldableSection={({ isUnfolded }) => (
-          <div className="box-border">
+  }) => {
+    const { bordered } = getParentBlockContent(rest.options, {} as AccordionContent);
+
+    return (
+      <BlockWrapper
+        className={style(
+          'border-b border-solid border-main-divider w-full',
+          bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0',
+          className,
+        )}
+        tag="div"
+        version="transparent"
+        {...rest}
+      >
+        <Foldable
+          isFoldButtonOnTop={isFoldButtonOnTop}
+          unfoldedByDefault={isExpanded}
+          renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection
-              className={`grid grid-cols-12 gap-1 border-box`}
+              className="flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0"
               isUnfolded={isUnfolded}
             >
               {renderChildren(rest)}
             </FoldableSection>
-          </div>
-        )}
-        renderFoldButton={({ isUnfolded, onToggle }) =>
-          renderFoldButton({ version, label, isUnfolded, onToggle })
-        }
-      />
-    </BlockWrapper>
-  ),
+          )}
+          renderFoldButton={({ isUnfolded, onToggle }) =>
+            renderFoldButton({ version, label, isUnfolded, onToggle })
+          }
+        />
+      </BlockWrapper>
+    );
+  },
 );
 
 RollupItem.childrenTypes = {
-  exclude: ['RollupItem', 'Accordion', 'AccordionItem', 'OtherProducts', 'OtherProductsItem'],
+  exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
 };
 
 interface FoldButtonProps extends FoldablePartProps {
   version?: BlockVersion;
   label?: string;
+  className?: string;
+  primaryIcon?: Picture;
 }
 
 const renderFoldButton = ({
@@ -63,11 +77,19 @@ const renderFoldButton = ({
   label: defaultLabel,
   isUnfolded,
   onToggle,
+  className = '',
+  primaryIcon,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
 
   return version === 'primary' ? (
-    renderPrimaryFoldButton({ label, icon: isUnfolded ? 'MinusIcon' : 'PlusIcon', onToggle })
+    renderPrimaryFoldButton({
+      label,
+      icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+      onToggle,
+      className,
+      primaryIcon,
+    })
   ) : (
     <DefaultFoldButton
       label={label}
@@ -80,15 +102,42 @@ const renderFoldButton = ({
 interface PrimaryFoldButtonProps {
   label?: string;
   icon?: IconName;
+  primaryIcon?: Picture;
   onToggle?: () => void;
+  onClick?: () => void;
+  className?: string;
 }
 
-const renderPrimaryFoldButton = ({ label, icon, onToggle }: PrimaryFoldButtonProps) => (
+const renderPrimaryFoldButton = ({
+  label,
+  icon,
+  primaryIcon,
+  onToggle,
+}: PrimaryFoldButtonProps) => (
   <button
-    className="border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer"
+    className={`border-none bg-transparent flex justify-between text-left w-full text-primary-text group cursor-pointer py-3.5 px-0`}
     onClick={onToggle}
   >
-    <span className="text-xl font-medium pr-2.5">{label}</span>
-    {icon ? <Img image={getIconWithVersion({ icon })} width="24" height="24" asSVG /> : null}
+    <div className="flex group-hover:text-primary-main">
+      {primaryIcon ? (
+        <Img
+          image={{ ...getIconWithVersion({ ...primaryIcon } as Picture) }}
+          className="mr-3 flex-shrink-0"
+          width="24"
+          height="24"
+          asSVG
+        />
+      ) : null}
+      <Text size="text-m-title-xs" font="font-medium">
+        {label}
+      </Text>
+    </div>
+    <Img
+      className="flex-shrink-0"
+      image={{ ...getIconWithVersion({ icon: icon }) }}
+      width="24"
+      height="24"
+      asSVG
+    />
   </button>
 );

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -7,22 +7,28 @@ interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
   isScrollable?: boolean;
+  onClick: (tab: TabData) => void;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, isScrollable = false } = props;
+  const { tab, currentTab, onClick, isScrollable = false } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
   const link = useLink();
   const adjustedProps = link(tab);
 
+  const handleClick = (ev?: { preventDefault: () => void }) => {
+    adjustedProps.onClick(ev);
+    onClick(tab);
+  };
+
   return (
     <a
       role="tab"
       className={getLinkTabClassName('link', active, isScrollable)}
       target={tab.target}
       href={adjustedProps.href}
-      onClick={adjustedProps.onClick}
+      onClick={handleClick}
     >
       <span className={getLinkTabClassName('text', active, isScrollable)}>{tab.text}</span>
     </a>

package/mobile/src/components/Tabs/Tabs.tsx

@@ -19,6 +19,14 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
+  useEffect(() => {
+    if (!tabs || !tabs[0]) {
+      return;
+    }
+
+    fireTabEvent(tabs[0]);
+  }, []);
+
   useEffect(() => {
     if (currentTab?.type === 'group') {
       defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref });
@@ -26,9 +34,7 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
   }, [currentTab]);
 
   const handleClick = useCallback((selectedTab: TabData) => {
-    if (selectedTab?.type === 'group') {
-      defaultEventBus.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
-    }
+    fireTabEvent(selectedTab);
     setCurrentTab(selectedTab);
   }, []);
 
@@ -61,3 +67,12 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
     </BlockWrapper>
   );
 });
+
+const fireTabEvent = (tab: TabData) => {
+  if (tab.type === 'group') {
+    defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
+  }
+  if (tab.type === 'link') {
+    defaultEventBus.fire('tab', { type: tab.type, label: tab.href });
+  }
+};

package/mobile/src/components/Tabs/renderTab.tsx

@@ -26,7 +26,13 @@ export const renderTab =
         return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
       case 'link': {
         return (
-          <LinkTab key={String(i)} tab={tab} currentTab={currentTab} isScrollable={isScrollable} />
+          <LinkTab
+            key={String(i)}
+            tab={tab}
+            currentTab={currentTab}
+            isScrollable={isScrollable}
+            onClick={onClick}
+          />
         );
       }
       default:

package/mobile/src/hooks/useBranches.ts

@@ -0,0 +1,43 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSON } from '../utils/fetchJSON';
+
+export interface Tariff {
+  tariffType?: string;
+  tariffValue?: number;
+}
+
+export interface SafeBoxCase {
+  safeBoxCasesSize?: string;
+  tariffs?: Tariff[];
+}
+
+export interface SafeBoxCaseVolume {
+  volume?: string;
+  safeBoxCases?: SafeBoxCase[];
+}
+
+export interface Branch {
+  branchCode?: string;
+  address?: string;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+  safeBoxCaseVolumes?: SafeBoxCaseVolume[];
+}
+
+const BRANCHES_URL = '/api/v1/branches';
+const EMPTY_VALUE = [];
+
+export function useBranches(regionCode?: string): Branch[] {
+  const { data } = useAsyncData<Branch[], any, string | null>(
+    regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null,
+    fetchSafeBoxes,
+  );
+
+  return data || EMPTY_VALUE;
+}
+
+const fetchSafeBoxes = async (url: string): Promise<Branch[]> => {
+  const result = await fetchJSON<Branch[]>(url, { method: 'GET' });
+
+  return result || EMPTY_VALUE;
+};

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

@@ -38,12 +38,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () =>
         defaultEventBus.subscribe('tab', (event) => {
           setHidden(
-            Boolean(
-              event.type === 'group' &&
-                event.label &&
-                block?.labels?.length &&
-                !block.labels.includes(event.label),
-            ),
+            Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)),
           );
         }),
       [block],

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

@@ -48,6 +48,9 @@ export const Icon = JSX<IconProps>(
         </Background>
       );
     }
+    if (!className.includes('h-')) {
+      imgProps['style'] = { height: `${imgProps.height}px` };
+    }
 
     return (
       <img
@@ -55,8 +58,8 @@ export const Icon = JSX<IconProps>(
         src={href}
         alt={alt}
         title={title}
-        {...imgProps}
         aria-hidden="true"
+        {...imgProps}
       />
     );
   },

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

@@ -26,7 +26,7 @@ export const List = JSX<ListProps>(
         {items.map((item, i) => (
           <ListItem
             key={String(i)}
-            className={`${itemClassName} mb-1.5`}
+            className={itemClassName}
             isDotted={isDotted}
             size={listItemSize}
           >

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

@@ -73,7 +73,6 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
       <div
         className={style('box-border overflow-auto no-scrollbar', listType, className)}
         style={containerStyle}
-        role="list"
         ref={containerRef}
       >
         {mapChildren((child, idx) => (

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import {
-  useIntersectionObserver,
   type IntersectionObserverOptions,
+  useIntersectionObserver,
 } from '../../hooks/useIntersectionObserver';
 
 /**
@@ -33,7 +33,6 @@ export const SwipeListItem = JSX<SwipeListControlItemProps>(
       <div
         className={`inline-block snap-always box-border ${className}`}
         style={style}
-        role="listitem"
         aria-current={Boolean(idx === activeIndex)}
         ref={ref}
       >

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
+import type { PreventableEvent } from '../../model/PreventableEvent';
 import { style } from '../../utils/style';
 
 export interface TopItemContent extends LinkProps {
@@ -11,7 +12,7 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   dataItemName?: string;
-  onClick?: () => void;
+  onClick?: (ev?: PreventableEvent) => void;
 }
 
 export const TopItem = JSX<TopItemProps>(({ className = '', active, flat, children, ...rest }) => {

package/package.json

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

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

@@ -5,7 +5,7 @@
   },
   "blocks": [
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 1",
         "isExpanded": true,
@@ -31,7 +31,7 @@
       ]
     },
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 2",
         "isExpanded": false,
@@ -41,7 +41,7 @@
       }
     },
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 3",
         "isExpanded": false,

package/src/components/Accordion/Accordion.fixture.mobile.tsx

@@ -5,10 +5,10 @@ import { Blocks } from '../Blocks';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { Accordion } from './Accordion';
+import { VerticalLayout } from '../VerticalLayout/VerticalLayout';
 
-export const ACCORDION_ITEM: BlockDef = {
-  type: 'AccordionItem',
+export const ROLLUP_ITEM: BlockDef = {
+  type: 'RollupItem',
   content: {
     label: 'Accordion label 1',
     labelIcon: { icon: 'CardIcon' },
@@ -27,27 +27,36 @@ const options = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion
+      <VerticalLayout
         className="col-span-12"
-        title="Accordion title"
-        description="Accordion description 2"
-        bordered={true}
         block={{
-          type: 'Accordion',
+          type: 'VerticalLayout',
           blocks: [
-            ACCORDION_ITEM,
             {
-              type: 'AccordionItem',
+              type: 'Headline',
+              content: {
+                title: 'Accordion title',
+                description: 'Accordion description 2',
+                headlineVersion: 'M',
+                align: 'text-center',
+              },
+            },
+            ROLLUP_ITEM,
+            {
+              type: 'RollupItem',
               content: { label: 'Accordion label 2', isExpanded: true },
               blocks: [{ type: 'Headline', content: HEADLINE }],
             },
             {
-              type: 'AccordionItem',
+              type: 'RollupItem',
               content: { label: 'Accordion label 3', isExpanded: true },
               blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
             },
           ],
         }}
+        version="primary"
+        isInnerPadding={false}
+        isPadding={true}
         options={options}
       />
     </div>