@redneckz/wildless-cms-uni-blocks 0.6.41 → 0.6.42

package/mobile/src/hooks/useRegions.ts

@@ -0,0 +1,16 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../utils/fetchJSON';
+
+const REGIONS_URL = '/api/v1/regions';
+
+export interface Region {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+export function useRegions(): Region[] {
+  const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
+
+  return data || [];
+}

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -20,10 +20,19 @@ export interface DispositionItem extends LinkProps {
   icon?: Picture;
 }
 
+/**
+ * @title Представительства за рубежом
+ * @required ["text", "href"]
+ */
+export interface ForeignOffice extends LinkProps {
+  icon?: Picture;
+}
+
 export interface SitemapDataProps {
   topItems?: TopMenuItem[];
   dispositions?: DispositionItem[];
   logo?: LogoType;
+  foreignOffices?: ForeignOffice[];
   defaultLocation?: string;
   officesLink?: string;
 }

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

@@ -0,0 +1,168 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useLink } from '../../hooks/useLink';
+import type { Region } from '../../hooks/useRegions';
+import { useRegions } from '../../hooks/useRegions';
+import { useSearch } from '../../hooks/useSearch';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
+import { Text } from '../../ui-kit/Text/Text';
+import { groupBy } from '../../utils/groupBy';
+import { Img } from '../Img/Img';
+import { SearchBar } from './SearchBar';
+
+const SEARCH_TERM_MIN_LENGTH = 3;
+
+interface RegionLinkProps {
+  onChangeLocation?: (region: Region) => void;
+}
+
+interface CloseButtonProps {
+  close?: () => void;
+}
+
+interface CurrentLocationProps {
+  currentLocation?: Region;
+}
+
+interface ForeignOfficeProps {
+  foreignOffices?: ForeignOffice[];
+}
+
+export type LocationProps = ForeignOfficeProps &
+  CloseButtonProps &
+  RegionLinkProps &
+  CurrentLocationProps &
+  UniBlockProps;
+
+export const Location = JSX<LocationProps>(
+  ({ currentLocation, onChangeLocation, close, foreignOffices }) => {
+    const { term, setTerm } = useSearch();
+
+    const handleSearch = useCallback((_: string) => setTerm(_), []);
+
+    const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
+      a.name.localeCompare(b.name),
+    );
+    const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
+
+    return (
+      <div className="absolute h-full w-full inset-0 bg-white text-l-light z-50">
+        <CloseButton close={close} />
+        <div className="container py-12">
+          <CurrentLocation currentLocation={currentLocation} />
+          <SearchBar onSearch={handleSearch} searchTerm={term} className="mb-7" />
+
+          {term && term.length >= SEARCH_TERM_MIN_LENGTH ? (
+            <div>
+              {regions
+                .filter((region) => region.name?.startsWith(term))
+                .map(renderRegion({ onChangeLocation, close }))}
+            </div>
+          ) : (
+            <div className="columns-5">
+              {Array.from(regionsGroupByLetter.entries()).map(
+                renderRegionGroup({ onChangeLocation, close }),
+              )}
+            </div>
+          )}
+
+          <ForeignOffices foreignOffices={foreignOffices} />
+        </div>
+      </div>
+    );
+  },
+);
+
+const regionFirstLetter = (region: Region) => region.name?.charAt(0) || '';
+
+const cleanUpRegions = (regions: Region[]) =>
+  regions.map((region) => ({
+    ...region,
+    name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
+  }));
+
+const CurrentLocation = JSX<CurrentLocationProps>(({ currentLocation }) =>
+  currentLocation ? (
+    <div className="mb-4">
+      <Text size="text-l" font="font-light">
+        Сейчас выбран:&nbsp;
+      </Text>
+      <button className="cursor-pointer" onClick={close}>
+        <Text color="text-green">{currentLocation.name}</Text>
+      </button>
+    </div>
+  ) : null,
+);
+
+const CloseButton = JSX<CloseButtonProps>(({ close }) => (
+  <button
+    className="visible peer-placeholder-shown:invisible absolute top-6 right-6 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
+    onClick={(e) => {
+      e.preventDefault();
+      close && close();
+    }}
+  >
+    <Img image="CloseIcon" width="24" height="24" />
+  </button>
+));
+
+const renderRegionGroup =
+  ({ onChangeLocation, close }: RegionLinkProps & CloseButtonProps) =>
+  ([letter, regions]: [string, Region[]]) =>
+    (
+      <div key={letter} className="break-inside-avoid mb-7 w-[224px]">
+        <div className="mb-2.5">
+          <Text size="text-h6">{letter}</Text>
+        </div>
+        {regions.map(renderRegion({ onChangeLocation, close }))}
+      </div>
+    );
+
+const renderRegion =
+  ({ onChangeLocation, close }: RegionLinkProps & CloseButtonProps) =>
+  (region: Region) =>
+    (
+      <div key={region.id} className="mb-1">
+        <button
+          className="cursor-pointer hover:text-primary-hover"
+          onClick={() => {
+            onChangeLocation && onChangeLocation(region);
+            close && close();
+          }}
+        >
+          {region.name}
+        </button>
+      </div>
+    );
+
+const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
+  foreignOffices?.length ? (
+    <div className="border-t border-main-divider mt-7 pt-7">
+      <div className="mb-4">
+        <Text size="text-m-light" color="text-secondary-text">
+          Представительства за рубежом:
+        </Text>
+      </div>
+      <div className="flex gap-10">
+        {foreignOffices.map((office, i: number) => (
+          <ForeignOffice key={String(i)} {...office} />
+        ))}
+      </div>
+    </div>
+  ) : null,
+);
+
+const ForeignOffice = JSX<ForeignOffice>(({ icon, ...rest }) => {
+  const link = useLink();
+  const { text, target, href, onClick } = link(rest);
+
+  return (
+    <div className="flex gap-x-3">
+      <Img image={icon} />
+      <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
+        {text}
+      </a>
+    </div>
+  );
+});

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

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface SearchBarInnerProps {
+  className?: string;
+  searchTerm?: string;
+  onSearch: (_: string) => void;
+}
+
+export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSearch }) => {
+  return (
+    <form className={`font-sans relative ${className}`}>
+      <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
+        {searchTerm ? null : (
+          <label htmlFor="search-bar-input" className={`text-secondary-text `}>
+            Поиск по филиалам
+          </label>
+        )}
+      </div>
+      <input
+        id="search-bar-input"
+        className={`h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
+              outline-none border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
+        value={searchTerm}
+        onChange={(e) => onSearch(e.target.value as string)}
+        type="text"
+        name="location-search-bar-input"
+      />
+    </form>
+  );
+});

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

@@ -29,7 +29,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
     className = '',
     containerRef,
     activeIndex,
-    visibleItemCount,
+    visibleItemCount = 0,
     gap = 0,
     padding = 0,
     snapAlign = 'snap-center',
@@ -54,11 +54,15 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
       },
       [onVisibleItemsChange, onVisibleIndicesChange],
     );
+    const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
 
     return (
       <div
         className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
-        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
+        style={{
+          ...getContainerStyle(padding, additionPadding),
+          gap: `${gap}px`,
+        }}
         role="list"
         ref={containerRef}
       >
@@ -83,11 +87,11 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
 );
 
 // Styles used to compensate outer container padding to get rid of clipping effect
-const getContainerStyle = (padding: number): Record<string, string> => ({
+const getContainerStyle = (padding: number, additionalPadding = 0): Record<string, string> => ({
   marginLeft: `${-padding}px`,
   marginRight: `${-padding}px`,
   paddingLeft: `${padding}px`,
-  paddingRight: `${padding}px`,
+  paddingRight: `${padding + additionalPadding}px`,
 });
 
 const getVisibleIndices = (itemsVisibilityList: ItemsVisibilityList) =>

package/mobile/src/utils/groupBy.ts

@@ -0,0 +1,10 @@
+export const groupBy = <K, V>(list: Array<V>, keyGetter: (input: V) => K): Map<K, Array<V>> => {
+  const map = new Map<K, Array<V>>();
+  list.forEach((item) => {
+    const key = keyGetter(item);
+    const collection = map.get(key);
+    map.set(key, [...(collection || []), item]);
+  });
+
+  return map;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.41",
+  "version": "0.6.42",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -185,7 +185,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "43 kB",
+      "limit": "45 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/Blocks.ts

@@ -43,6 +43,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { Recommendation } from './Recommendation/Recommendation';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -95,11 +96,10 @@ export const Blocks: BlocksRegistry = {
   ProductGallery,
   ProductTile,
   PromoTile,
-  OfficeMap,
   OfficeServicesBlock,
   OtherProducts,
   OtherProductsItem,
-  Recommendation,
+  CarouselRecommendationCard,
   RollupItem,
   SafeDepositRental,
   StepsBlock,
@@ -109,4 +109,6 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
+  Recommendation,
+  OfficeMap,
 };

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,13 +1,14 @@
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
+import { Carousel } from './Carousel';
+import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
-import { Carousel } from './Carousel';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 
 const options = {
   blocksRegistry: Blocks,
@@ -127,7 +128,6 @@ export default {
       />
     </div>
   ),
-
   program: (
     <div className="container grid grid-cols-12">
       <Carousel
@@ -165,4 +165,22 @@ export default {
       />
     </div>
   ),
+  recommendations: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={true}
+        isCyclic={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -0,0 +1,19 @@
+{
+  "content": {
+   "image": {
+    "format": "webp",
+    "size": {
+      "width": 180,
+      "height": 180
+    }
+  },
+  "title": "Заголовок 1",
+  "description": "Описание 1",
+  "socialMedia": [
+    { "href": "https://t.me" },
+    { "href": "https://vk.com" },
+    { "href": "https://ok.ru" }
+  ],
+  "version": "primary"
+  }
+}

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -0,0 +1,47 @@
+import type { LinkProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard';
+import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+
+const image: Picture = {
+  src: 'product-basket.png',
+  format: 'webp',
+  size: {
+    width: 290,
+    height: 290,
+  },
+  title: 'product-basket',
+};
+
+const socialMedia: LinkProps[] = [
+  { href: 'https://t.me' },
+  { href: 'https://vk.com' },
+  { href: 'https://ok.ru' },
+];
+
+const items = ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'];
+
+export const CAROUSEL_RECOMMENDATION_CARD: CarouselRecommendationCardContent = {
+  title: 'РоссельхозБанк',
+  items,
+  image,
+  socialMedia,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard className="col-span-4" {...CAROUSEL_RECOMMENDATION_CARD} />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-4"
+        version="secondary"
+        {...CAROUSEL_RECOMMENDATION_CARD}
+      />
+    </div>
+  ),
+};

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -0,0 +1,62 @@
+import { BaseTile } from '../BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { List } from '../../ui-kit/List/List';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { SocialMedia } from '../Footer/SocialMedia';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import type { UniBlockProps } from '../../model/JSXBlock';
+
+export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
+
+export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
+  ({
+    button,
+    className = '',
+    description,
+    image,
+    items = [],
+    socialMedia = [],
+    title,
+    version = 'primary',
+    ...rest
+  }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
+    ) : null;
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
+    return (
+      <BlockWrapper
+        className={`relative text-left border border-solid box-border p-7 min-w-[524px]
+        ${BorderVersionStyleMap[version]}
+        ${VersionStyleMap[version]}
+        ${className}`}
+        {...rest}
+      >
+        <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
+          <div className="h-full flex flex-col justify-between">
+            {description ? <span className="mb-2">{description}</span> : null}
+            {items.length ? (
+              <List
+                className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
+                items={items}
+                version={version}
+              />
+            ) : null}
+            {socialMedia.length ? (
+              <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
+            ) : null}
+            {button?.text ? <div className="pt-2 mt-16">{renderButton({ button })}</div> : null}
+          </div>
+        </BaseTile>
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.ui.json

@@ -0,0 +1,9 @@
+{
+  "content": {
+    "items": {
+      "image": {
+        "ui:field": "picture"
+      }
+    }
+  }
+}

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -0,0 +1,45 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkCommonProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+
+/**
+ * @title Карточка рекомендаций
+ */
+export interface CarouselRecommendationCardContent extends HeadlineCommonProps, ListContent {
+  /**
+   * @title Соц сети
+   * @minItems 3
+   * @default [
+   * { "href": "https://t.me" },
+   * { "href": "https://vk.com" },
+   * { "href": "https://ok.ru" },
+   * ]
+   */
+  socialMedia?: LinkCommonProps[];
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 290
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 174,
+   *       "format": "webp",
+   *       "alignment": "southeast"
+   *   }]
+   * }
+   */
+  image?: Picture;
+  /**
+   * @default {
+   * "text": "",
+   * "version": "secondary"
+   * }
+   */
+  button?: ButtonProps;
+  version?: BlockVersion;
+}

package/src/components/Header/Header.tsx

@@ -25,10 +25,11 @@ export const Header = JSX<HeaderProps>(
   ({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
     const router = useRouter();
 
-    const { topItems, logo, defaultLocation, officesLink } = useSWRResource<SitemapDataProps>(
-      projectSettings.SITEMAP || 'sitemap',
-      rest.options?.page?.fallback,
-    );
+    const { topItems, logo, defaultLocation, foreignOffices, officesLink } =
+      useSWRResource<SitemapDataProps>(
+        projectSettings.SITEMAP || 'sitemap',
+        rest.options?.page?.fallback,
+      );
 
     const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
 
@@ -56,6 +57,7 @@ export const Header = JSX<HeaderProps>(
             {topMenu}
             <HeaderSecondaryMenu
               className="ml-auto"
+              foreignOffices={foreignOffices}
               defaultLocation={defaultLocation}
               officesLink={officesLink}
               bgColor={bgColor}

package/src/components/Header/HeaderBurger.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useGeolocation } from '../../hooks/useGeolocation';
+import { useLocation } from '../../hooks/useLocation';
 import type { VNode } from '../../model/VNode';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { Text } from '../../ui-kit/Text/Text';
 import type { DispositionItem } from './HeaderContent';
 
 export interface HeaderBurgerProps {
@@ -14,7 +15,7 @@ export interface HeaderBurgerProps {
 
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ burgerSubMenu, onClick, defaultLocation = '', children }) => {
-    const [city, getCity] = useGeolocation(defaultLocation);
+    const [location] = useLocation(defaultLocation);
 
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
@@ -24,10 +25,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
         >
           <Img image="CloseIcon" width="24" height="24" asSVG />
         </button>
-        <button
-          onClick={getCity}
-          className="flex items-center text-s text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
-        >
+        <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
             image="GeolocationIcon"
             width="20"
@@ -35,7 +33,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
             className="text-primary-main box-border mr-2"
             asSVG
           />
-          {city}
+          <Text color="text-secondary-text">{location.name}</Text>
         </button>
         {children}
         <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>