@redneckz/wildless-cms-uni-blocks 0.2.53 → 0.2.56

package/src/ContentPage.tsx

@@ -1,5 +1,5 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { Blocks } from './Blocks'; // TODO Lazy load
+import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
+import type { BlockContent } from './Blocks';
 import { LikeControl } from './LikeControl';
 import { Placeholder } from './Placeholder';
 import type { BlockDef, ContentPageDef, UniBlockProps } from './types';
@@ -16,6 +16,10 @@ export type BlockDecorator<VNode = any> = (
 ) => any;
 
 export interface ContentPageProps extends UniBlockProps {
+  blocksRegistry: Record<
+    string,
+    (props: PropsWithChildren<UniBlockProps & BlockContent, any>, context?: any) => any
+  >;
   data: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }
@@ -26,8 +30,9 @@ const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }
 export const ContentPage = JSX<ContentPageProps>(
   ({
     className,
-    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
     context,
+    blocksRegistry,
+    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
     blockDecorator = defaultBlockDecorator,
   }) => {
     return (
@@ -48,11 +53,11 @@ export const ContentPage = JSX<ContentPageProps>(
 
     function renderBlock(block: BlockDef, i: number) {
       const { type } = block;
-      if (!(type in Blocks)) {
+      if (!(type in blocksRegistry)) {
         console.warn(`No block with "${type}" is registered`);
       }
 
-      const BlockComponent = Blocks[type as keyof typeof Blocks] || Placeholder;
+      const BlockComponent = blocksRegistry[type] || Placeholder;
       return blockDecorator(
         {
           blockClassName: style2className(block.style),

package/src/ContentPageContext.tsx

@@ -24,10 +24,13 @@ export type AsyncDataHook = <Data, Error = any>(
   fetcher: () => Promise<Data>,
 ) => { data?: Data; error?: Error };
 
+export type GeolocationHook = (defaultLocation: string) => [string, () => void];
+
 export interface ContentPageContext {
   useRouter: () => Router;
   useState: <State>(initialState: State) => [State, (_: State) => void];
   useAsyncData: AsyncDataHook;
+  useGeolocation: GeolocationHook;
   useLikeService: () => LikeService;
   useSearch: () => Search;
   handlerDecorator?: HandlerDecorator;

package/src/ExchangeRateTile.tsx

@@ -18,10 +18,12 @@ const CURRENCY_ICONS_MAP = {
   EUR: EuroIcon,
 };
 
-const button: ButtonProps = {
-  text: 'Все показатели',
-  href: 'https://cbr.ru/currency_base/daily/',
-};
+const buttons: ButtonProps[] = [
+  {
+    text: 'Все показатели',
+    href: 'https://cbr.ru/currency_base/daily/',
+  },
+];
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context, title }) => {
   const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
@@ -30,7 +32,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context
       className={className}
       context={context}
       title={title || 'Курсы обмена валют'}
-      button={button}
+      buttons={buttons}
     >
       <table>
         <thead>

package/src/Footer/Footer.mobile.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../types';
+import type { FooterContent } from './Footer';
+import { TextInformation } from './TextInformation';
+
+export interface FooterProps extends FooterContent, UniBlockProps {}
+
+export const Footer = JSX<FooterProps>(({ className, context }) => (
+  <footer className={`${className} px-9 py-2 bg-white rounded-bl-3xl rounded-br-3xl`}>
+    <TextInformation context={context} />
+  </footer>
+));

package/src/Header/Header.fixture.tsx

@@ -4,7 +4,7 @@ import { Header } from './Header';
 export default (
   <Header
     context={context}
-    location="Москва"
+    defaultLocation="Москва"
     topItems={[
       {
         href: 'https://rshb.ru/',

package/src/Header/Header.tsx

@@ -13,7 +13,7 @@ import { isTopItemActive } from './isTopItemActive';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(({ className, location, context, topItems }) => {
+export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, topItems }) => {
   const router = context.useRouter();
   const sitemap = useSitemap(context.useAsyncData);
   const { handlerDecorator } = context;
@@ -46,7 +46,11 @@ export const Header = JSX<HeaderProps>(({ className, location, context, topItems
       <div className="flex items-center">
         <Logo className="mr-8" />
         {topMenu}
-        <HeaderSecondaryMenu location={location} className="ml-auto" />
+        <HeaderSecondaryMenu
+          context={context}
+          className="ml-auto"
+          defaultLocation={defaultLocation}
+        />
       </div>
       <div className="mt-5 h-[1px] bg-main-divider" />
       <nav className="mt-5">{subMenu}</nav>

package/src/Header/HeaderContent.ts

@@ -1,6 +1,6 @@
 import type { TopMenuItem } from '../types';
 
 export interface HeaderContent {
-  location?: string;
+  defaultLocation?: string;
   topItems?: TopMenuItem[];
 }

package/src/Header/HeaderSecondaryMenu.tsx

@@ -2,41 +2,55 @@ import { JSX } from '@redneckz/uni-jsx';
 import { GridIcon, LoupeIcon, ProfileIcon } from '../Icons/index';
 import { TopItem } from '../ui-kit/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
+import type { UniBlockProps } from '../types';
 
-interface HeaderSecondaryMenuProps {
-  location?: string;
+interface HeaderSecondaryMenuContent {
+  defaultLocation?: string;
   className?: string;
 }
 
-export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(({ location, className }) => {
-  return (
-    <div className={`flex items-center ${className || ''}`}>
-      <TopItem className="mr-5" flat={true} href="#" text={location} ariaLabel="Местоположение" />
-      <TopItem
-        className="mr-7"
-        flat={true}
-        href="#"
-        text="Офисы и банкоматы"
-        ariaLabel="Список всех доступных офисов и банкоматов"
-      />
-      <HeaderSecondaryMenuButton
-        className="mr-5 text-primary-text hover:text-primary-main"
-        ariaLabel="Поиск по сайту"
-      >
-        {LoupeIcon({ 'aria-hidden': true })}
-      </HeaderSecondaryMenuButton>
-      <HeaderSecondaryMenuButton
-        className="mr-5 text-primary-text hover:text-primary-main"
-        ariaLabel="Профиль"
-      >
-        {ProfileIcon({ 'aria-hidden': true })}
-      </HeaderSecondaryMenuButton>
-      <HeaderSecondaryMenuButton
-        className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
-        ariaLabel="Дополнительные ссылки"
-      >
-        {GridIcon({ 'aria-hidden': true })}
-      </HeaderSecondaryMenuButton>
-    </div>
-  );
-});
+export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent, UniBlockProps {}
+
+export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
+  ({ context, className, defaultLocation = '' }) => {
+    const [city, getCity] = context.useGeolocation(defaultLocation);
+
+    return (
+      <div className={`flex items-center ${className || ''}`}>
+        <TopItem
+          className="mr-5"
+          flat={true}
+          href="#"
+          text={city}
+          ariaLabel="Местоположение"
+          onClick={getCity}
+        />
+        <TopItem
+          className="mr-7"
+          flat={true}
+          href="#"
+          text="Офисы и банкоматы"
+          ariaLabel="Список всех доступных офисов и банкоматов"
+        />
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-primary-text hover:text-primary-main"
+          ariaLabel="Поиск по сайту"
+        >
+          {LoupeIcon({ 'aria-hidden': true })}
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-primary-text hover:text-primary-main"
+          ariaLabel="Профиль"
+        >
+          {ProfileIcon({ 'aria-hidden': true })}
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
+          ariaLabel="Дополнительные ссылки"
+        >
+          {GridIcon({ 'aria-hidden': true })}
+        </HeaderSecondaryMenuButton>
+      </div>
+    );
+  },
+);

package/src/MobileBlocks.ts

@@ -0,0 +1,25 @@
+import { BenefitsBlock } from './BenefitsBlock';
+import { ExchangeRateTile } from './ExchangeRateTile';
+import { Footer } from './Footer/Footer.mobile';
+import { Header } from './Header/index';
+import { MobileAppTile } from './MobileAppTile';
+import { Placeholder } from './Placeholder';
+import { ProductBlock } from './ProductBlock';
+import { ProductGallery } from './ProductGallery';
+import { ProductTile } from './ProductTile';
+import { StepsBlock } from './StepsBlock';
+import { Tile } from './Tile';
+
+export const MobileBlocks = {
+  Header,
+  Footer,
+  Placeholder,
+  Tile,
+  ProductTile,
+  ProductBlock,
+  StepsBlock,
+  BenefitsBlock,
+  ProductGallery,
+  ExchangeRateTile,
+  MobileAppTile,
+};

package/src/ProductBlock.fixture.tsx

@@ -7,8 +7,8 @@ const image: Picture = {
   src: 'money-1.png',
   format: 'webp',
   size: {
-    width: 300,
-    height: 300,
+    width: 280,
+    height: 280,
   },
 };
 
@@ -70,6 +70,7 @@ export default {
       context={context}
       title={'Оплата проходит \nв 180 странах мира'}
       breadcrumbs={[]}
+      description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
       items={[
         'Совершайте любые личные покупки',
         'Используйте корпоративную карту как обычную дебетовую, если вы ИП',

package/src/ProductBlock.tsx

@@ -2,13 +2,35 @@ import { JSX } from '@redneckz/uni-jsx';
 import { ProductBlockInner } from './ProductBlockInner';
 import type { ProductBlockInnerContent } from './ProductBlockInner';
 import type { UniBlockProps } from './types';
+import { Breadcrumb, BreadcrumbProps } from './ui-kit/Breadcrumb';
+import { useLink } from './useLink';
+import { joinList } from './utils/joinList';
 
-export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {}
+export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {
+  breadcrumbs?: BreadcrumbProps[];
+}
 
 export const ProductBlock = JSX<ProductBlockProps>((props) => {
-  const className = props.className;
+  const { context, className, breadcrumbs } = props;
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
   return (
-    <section className={`bg-white p-11 pr-[7.5rem] ${className || ''}`}>
+    <section className={`font-sans bg-white pl-12 pr-[7.5rem] py-10 ${className || ''}`}>
+      {breadcrumbs?.length ? (
+        <div className="text-xs mb-6">
+          {joinList(<span className="text-secondary-text mx-2">/</span>)(
+            breadcrumbs.map((breadcrumb, i) => (
+              <Breadcrumb
+                key={String(i)}
+                {...useLink(
+                  { router, handlerDecorator },
+                  { className: 'text-secondary-text', ...breadcrumb },
+                )}
+              />
+            )),
+          )}
+        </div>
+      ) : null}
       <ProductBlockInner {...props} />
     </section>
   );

package/src/ProductBlockInner.tsx

@@ -1,78 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon } from './Icons/index';
+import type { UniBlockProps, Benefit } from './types';
+import { BaseTile } from './BaseTile';
+import type { BaseTileContent } from './BaseTile';
 import { Img } from './Img';
-import type { Picture, UniBlockProps, Benefit } from './types';
-import { BlockItem } from './ui-kit/BlockItem';
-import type { ButtonProps } from './ui-kit/Button';
-import { Button } from './ui-kit/Button';
-import { Breadcrumb, BreadcrumbProps } from './ui-kit/Breadcrumb';
-import { useLink } from './useLink';
-import { joinList } from './utils/joinList';
 
 const ICONS = { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon };
 
-export interface ProductBlockInnerContent {
-  title?: string;
-  description?: string;
-  breadcrumbs?: BreadcrumbProps[];
-  image?: Picture;
+export interface ProductBlockInnerContent extends BaseTileContent {
   benefits?: Benefit[];
-  items?: string[];
-  buttons?: ButtonProps[];
 }
 
 export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlockProps {}
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
-  ({ className, context, title, description, breadcrumbs, benefits, buttons, image, items }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-
+  ({ className, context, title, description, benefits, buttons, image, items }) => {
     return (
-      <div className={`font-sans flex justify-between items-stretch ${className || ''}`}>
-        <div className="flex flex-col">
-          {breadcrumbs?.length ? (
-            <div className="text-xs mb-6">
-              {joinList(<span className="text-secondary-text mx-2">/</span>)(
-                breadcrumbs.map((breadcrumb, i) => (
-                  <Breadcrumb
-                    key={String(i)}
-                    {...useLink(
-                      { router, handlerDecorator },
-                      { className: 'text-secondary-text', ...breadcrumb },
-                    )}
-                  />
-                )),
-              )}
-            </div>
-          ) : null}
+      <div className={`flex justify-between items-stretch ${className || ''}`}>
+        <div className={'flex flex-col'}>
           {title && (
             <h1 className="font-medium text-title-lg m-0 whitespace-pre-wrap max-w-[600px]">
               {title}
             </h1>
           )}
-          {description && (
-            <div className="font-normal text-base max-w-[600px] mt-4">{description}</div>
-          )}
-          {benefits?.length ? (
-            <div className="flex gap-6 mt-7">{benefits.map(renderBenefit)}</div>
-          ) : null}
-          {items?.length ? (
-            <section className="mt-5" role="list">
-              {items.map((_, i) => (
-                <BlockItem className="mb-2" key={String(i)} text={_} />
-              ))}
-            </section>
-          ) : null}
-          {buttons?.length ? (
-            <div className="flex mt-auto gap-4">
-              {buttons.map((button, index) =>
-                renderButton(useLink({ router, handlerDecorator }, button), index),
-              )}
-            </div>
-          ) : null}
+          <BaseTile context={context} description={description} items={items} buttons={buttons}>
+            {benefits?.length ? (
+              <div className="flex gap-6 mt-6 mb-12">{benefits.map(renderBenefit)}</div>
+            ) : null}
+          </BaseTile>
         </div>
-        {image?.src && <Img image={image} className="mt-auto" />}
+        {image?.src && <Img className="mt-auto" image={image} />}
       </div>
     );
   },
@@ -95,17 +52,3 @@ function renderBenefit(benefit: Benefit, i: number) {
     </div>
   );
 }
-
-function renderButton(button: ButtonProps, i: number) {
-  return button?.text ? (
-    <Button key={String(i)} {...button} className="mt-8" version={button.version} />
-  ) : null;
-}
-
-function join<E>(sep: E): (list: E[]) => E[] {
-  return (list) =>
-    list.reduce(
-      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]),
-      [] as E[],
-    );
-}

package/src/ProductTile.fixture.tsx

@@ -43,11 +43,13 @@ export default {
             description: 'до 5 лет',
           },
         ]}
-        button={{
-          text: 'Подробнее',
-          href: '/credit-cards',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            text: 'Подробнее',
+            href: '/credit-cards',
+            version: 'secondary',
+          },
+        ]}
         image={cardWithMoney}
       />
     </div>
@@ -73,12 +75,14 @@ export default {
             description: 'до 3 лет',
           },
         ]}
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
         image={letterWithMoney}
       />
     </div>
@@ -104,12 +108,14 @@ export default {
             description: 'до 10 лет',
           },
         ]}
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
         image={building}
       />
     </div>
@@ -135,12 +141,14 @@ export default {
             description: 'до 5 лет',
           },
         ]}
-        button={{
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        }}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
       />
     </div>
   ),

package/src/ProductTile.tsx

@@ -1,79 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ContentPageContext } from './ContentPageContext';
-import { Img } from './Img';
-import { BlockVersion, Picture } from './types';
-import type { ButtonProps } from './ui-kit/Button';
-import { Button } from './ui-kit/Button';
-import { useLink } from './useLink';
-import type { Benefit } from './types';
+import type { UniBlockProps, Benefit } from './types';
+import { BlockVersion } from './types';
+import { Tile } from './Tile';
+import type { BaseTileContent } from './BaseTile';
 
-export interface ProductTileContent {
-  title?: string;
-  description?: string;
+export interface ProductTileContent extends BaseTileContent {
   benefits?: Benefit[];
-  image?: Picture;
-  button?: ButtonProps;
-  version?: BlockVersion;
 }
 
-export interface ProductTileProps extends ProductTileContent {
-  className?: string;
-  context: ContentPageContext;
-}
-
-const productTileStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
+export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
-export const ProductTile = JSX<ProductTileProps>(
-  ({ className, context, title, description, button, image, benefits, version = 'primary' }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-    return (
-      <section className={`font-sans p-9 ${className || ''} ${productTileStyleMap[version]}`}>
-        <div className="flex flex-col w-full">
-          {title && (
-            <h3 className="font-medium text-title-sm m-0 whitespace-pre-wrap max-w-[600px]">
-              {title}
-            </h3>
-          )}
-          {description && (
-            <div className="font-normal text-base max-w-[600px] mt-4">{description}</div>
-          )}
-          <div className="flex mt-5">
-            <div className="grow flex flex-col">
-              <div className="flex">
-                {benefits?.length ? (
-                  <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
-                ) : null}
-                {benefits?.length ? (
-                  <div className="pt-1">
-                    {benefits.map((_, i) => renderBenefitLabel(_, i, version))}
-                  </div>
-                ) : null}
-              </div>
-              {button?.text && (
-                <div className="mt-auto">
-                  <Button
-                    className="mt-8"
-                    {...useLink({ router, handlerDecorator }, button)}
-                    version="secondary"
-                  />
-                </div>
-              )}
-            </div>
-            {image && (
-              <div className="mt-auto flex-none h-[220px] w-[220px]">
-                <Img image={image} />
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
-    );
-  },
-);
+export const ProductTile = JSX<ProductTileProps>((props) => {
+  const { benefits, version } = props;
+  return (
+    <Tile {...props}>
+      <div className="flex mt-5 mb-10">
+        {benefits?.length ? (
+          <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
+        ) : null}
+        {benefits?.length ? (
+          <div className="pt-1">{benefits.map((_, i) => renderBenefitLabel(_, i, version))}</div>
+        ) : null}
+      </div>
+    </Tile>
+  );
+});
 
 function renderBenefitLabel(benefit: Benefit, i: number, version = 'primary') {
   const labelStyleMap: Record<BlockVersion, string> = {